<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Javascript基础 | CoderT</title><meta name="author" content="CoderT"><meta name="copyright" content="CoderT"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="ECMAScript语法">
<meta property="og:type" content="article">
<meta property="og:title" content="Javascript基础">
<meta property="og:url" content="http://example.com/2022/09/19/JavaScript%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="CoderT">
<meta property="og:description" content="ECMAScript语法">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg">
<meta property="article:published_time" content="2022-09-19T06:40:37.000Z">
<meta property="article:modified_time" content="2023-09-20T07:20:26.744Z">
<meta property="article:author" content="CoderT">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2022/09/19/JavaScript%E5%9F%BA%E7%A1%80/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><meta/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: {"limitDay":365,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '天',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: CoderT","link":"链接: ","source":"来源: CoderT","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Javascript基础',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-09-20 15:20:26'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
  const $loadingBox = document.getElementById('loading-box')
  const $body = document.body
  const preloader = {
    endLoading: () => {
      $body.style.overflow = ''
      $loadingBox.classList.add('loaded')
    },
    initLoading: () => {
      $body.style.overflow = 'hidden'
      $loadingBox.classList.remove('loaded')
    }
  }

  preloader.initLoading()
  window.addEventListener('load',() => { preloader.endLoading() })

  if (false) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
})()</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">2</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">1</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="CoderT"><span class="site-name">CoderT</span></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Javascript基础</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-09-19T06:40:37.000Z" title="发表于 2022-09-19 14:40:37">2022-09-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-09-20T07:20:26.744Z" title="更新于 2023-09-20 15:20:26">2023-09-20</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E4%B8%AA%E4%BA%BA%E7%AC%94%E8%AE%B0/">个人笔记</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Javascript基础"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h3 id="js-编写位置"><a href="#js-编写位置" class="headerlink" title="js 编写位置"></a>js 编写位置</h3><ol>
<li><mark class="hl-label orange">html</mark>  属性中(不推荐)</li>
<li>script 元素中(常见)</li>
<li>外部引入独立的 js 文件<br>通过<strong>src</strong>属性引入</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1.编写位置一：在html内部(了解) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;alert(&#x27;百度一下&#x27;)&quot;</span>&gt;</span>点我百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:alert(&#x27;哈哈哈&#x27;)&quot;</span>&gt;</span>google一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 2.写在script元素内(常见) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span> <span class="attr">class</span>=<span class="string">&quot;bing&quot;</span>&gt;</span>bing一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">var</span> bingEl = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.bing&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  bingEl.<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(<span class="string">&#x27;bing一下&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 3.编写独立的js文件（代码多） --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span> <span class="attr">class</span>=<span class="string">&quot;demo&quot;</span>&gt;</span>我是demo<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./demo.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="noscript"><a href="#noscript" class="headerlink" title="noscript"></a>noscript</h3><p>对于不能处理 js 的浏览器，我们需要给用户一个提示，页面的<strong>优雅降级</strong>的处理方案</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">noscript</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>你的浏览器不支持js，请打开对应的渲染或者更换浏览器<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">noscript</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="title function_">alert</span>(<span class="string">&#x27;你的浏览器正在运行js代码&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="编写-js-的注意事项"><a href="#编写-js-的注意事项" class="headerlink" title="编写 js 的注意事项"></a>编写 js 的注意事项</h3><ul>
<li>注意一:script 元素不能写成单标签,而且外部引入的 js 标签内不要再写</li>
<li>注意二:type&#x3D;”text&#x2F;javascript”现在可以不写，js 是所有现代浏览器和 html5 默认的脚本语言</li>
<li>注意三:把 script 标签放在 body 最后面</li>
</ul>
<blockquote>
<p>script 还有 defer、async 属性，我们后续再讲解</p>
</blockquote>
<h3 id="交互方式"><a href="#交互方式" class="headerlink" title="交互方式"></a>交互方式</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.交互方式一:alert函数</span></span><br><span class="line"><span class="comment">// alert(&#x27;hello world&#x27;);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//2.console.log函数 (最常用)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello world&#x27;</span>);</span><br><span class="line"><span class="comment">// message.length;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//3.交互方式三 document.write()</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;hello alex&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//4.交互方式4 prompt函数 接受用户输入的内容</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入你的名字&#x27;</span>);</span><br><span class="line"><span class="title function_">alert</span>(result + <span class="string">&#x27;是个瓜皮&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p>console.log 一定要掌握</p>
<h3 id="js-语句和分号"><a href="#js-语句和分号" class="headerlink" title="js 语句和分号"></a>js 语句和分号</h3><ul>
<li>语句(statements)是向浏览器发出的指令，通常表达一个操作或者行为(Action)</li>
<li>分号(semicolon)</li>
</ul>
<p>推荐：<br>前期对 js 语法不熟练的情况下 写分号<br>后期熟练以后 任意</p>
<h3 id="js-注释"><a href="#js-注释" class="headerlink" title="js 注释"></a>js 注释</h3><ul>
<li>单行注释 ctrl+斜杠 mac:command+斜杠</li>
<li>多行注释 alt+shift+a mac:option+⬆️+a</li>
<li>文档注释 单独的 js 文件才能生效 在函数上方输入<code>/**</code>回车即可</li>
</ul>
<blockquote>
<p>注意：js 不支持多行注释的嵌套</p>
</blockquote>
<h2 id="变量-variable-和数据类型-data-type"><a href="#变量-variable-和数据类型-data-type" class="headerlink" title="变量(variable)和数据类型(data-type)"></a>变量(variable)和数据类型(data-type)</h2><ul>
<li>程序中数据会改变的量</li>
<li>盒子，存储某一个东西</li>
</ul>
<h3 id="变量的定义"><a href="#变量的定义" class="headerlink" title="变量的定义"></a>变量的定义</h3><ol>
<li>变量的声明:使用 var 关键字（后续 es6 还有 let const）</li>
<li>变量的赋值:使用 &#x3D; 给变量进行赋值</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一步：变量的声明</span></span><br><span class="line"><span class="comment">//  var关键字</span></span><br><span class="line"><span class="comment">// 第二步：变量的赋值 用 = 即可</span></span><br><span class="line"><span class="keyword">var</span> currentTime = <span class="string">&#x27;14:46&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//其他的写法</span></span><br><span class="line"><span class="keyword">var</span> nextTime;</span><br><span class="line">nextTime = <span class="string">&#x27;16:00&#x27;</span>;</span><br><span class="line"><span class="comment">// 其他的写法二 同时声明多个变量(不推荐，阅读性比较差)</span></span><br><span class="line"><span class="keyword">var</span> name, age, height;</span><br><span class="line">name = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line">age = <span class="number">99</span>;</span><br><span class="line">age1 = <span class="string">&#x27;99&#x27;</span>;</span><br><span class="line">height = <span class="number">1.7</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(age, age1, height, currentTime, nextTime);</span><br><span class="line"><span class="comment">//补充</span></span><br><span class="line"><span class="comment">// 1.当我们实际使用/打印变量的时候，实际上是在使用里面的值</span></span><br><span class="line"><span class="comment">// 2.console.log(参数1,参数2,参数3,.......)</span></span><br></pre></td></tr></table></figure>

<p>语法:<code>var 名字 = 值</code></p>
<h3 id="变量的命名规范"><a href="#变量的命名规范" class="headerlink" title="变量的命名规范"></a>变量的命名规范</h3><h4 id="规则"><a href="#规则" class="headerlink" title="规则"></a>规则</h4><p>必须遵守，不然就报错</p>
<ol>
<li>一个变量只能有数字，字母，美元符号$,以及下划线<code>_</code>组成</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num123</span><br><span class="line"><span class="keyword">var</span> $123</span><br><span class="line"><span class="keyword">var</span> q_q</span><br><span class="line"><span class="keyword">var</span> $0_0$</span><br><span class="line"><span class="keyword">var</span> $$$$</span><br><span class="line"><span class="keyword">var</span> $# <span class="comment">//报错</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>一个变量不能由数字开头</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> n1=<span class="number">100</span></span><br><span class="line"><span class="keyword">var</span> <span class="number">1n</span><span class="comment">//报错</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>严格区分大小写</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> nUm = <span class="number">200</span>;</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>不要使用关键字和保留字 (<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar">https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar</a>)</li>
<li>不要使用中文</li>
</ol>
<h4 id="规范"><a href="#规范" class="headerlink" title="规范"></a>规范</h4><p>建议你遵守</p>
<ol>
<li><p>变量语义化<br>userName,password</p>
</li>
<li><p>赋值符号(&#x3D;)左右两边都加上空格</p>
</li>
<li><p>驼峰命名 userName✅</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 交换两个变量的值</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">20</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;交换前&#x27;</span>, a, b);</span><br><span class="line"><span class="comment">// //方法一:借助第三个变量</span></span><br><span class="line"><span class="comment">// var temp = a; //a:10  b:20</span></span><br><span class="line"><span class="comment">// a = b; //a:20  b:20</span></span><br><span class="line"><span class="comment">// b = temp; //a:20   b:10</span></span><br><span class="line"><span class="comment">// console.log(&#x27;交换后&#x27;, a, b);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// //方法二:不允许使用第三个变量</span></span><br><span class="line"><span class="comment">// a = a + b; //a:30  b:20</span></span><br><span class="line"><span class="comment">// b = a - b; //a:30   b:10</span></span><br><span class="line"><span class="comment">// a = a - b; //a: 20   b:10</span></span><br><span class="line"><span class="comment">// console.log(&#x27;交换后&#x27;, a, b);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 方法三：</span></span><br><span class="line">[a, b] = [b, a];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b);</span><br></pre></td></tr></table></figure>

<h4 id="变量的注意事项"><a href="#变量的注意事项" class="headerlink" title="变量的注意事项"></a>变量的注意事项</h4><ol>
<li>注意一:如果一个变量未声明就直接使用，会报错</li>
<li>注意二:如果一个变量有声明，但是没有赋值，那么默认值是 undefined</li>
<li>注意三:如果没有使用 var 声明变量也可以，但是禁止(实际上是会添加到 window 上的)</li>
</ol>
<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><p>在 js 中一共有 8 种基本的数据类型(7 种原始类型和一种复杂类型)<br>Number<br>String<br>Boolean<br>Undefined<br>Null<br>Object</p>
<p>BigInt(后续了解)：<strong>Symbol</strong> 指的是独一无二的值。每个通过 <strong>Symbol()</strong> 生成的值都是唯一的。<br>Symbol(后续了解)：一种数字类型的数据，它可以表示任意精度格式的整数。而在其他编程语言中，可以存在不同的数字类型，例如:整数、浮点数、双精度数或大斐波数。</p>
<h4 id="typeof-操作符"><a href="#typeof-操作符" class="headerlink" title="typeof 操作符"></a>typeof 操作符</h4><p>确定任意变量的数据类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.typeof 基本操练</span></span><br><span class="line"><span class="keyword">var</span> info = <span class="string">&#x27;jack&#x27;</span>;</span><br><span class="line">info = <span class="number">18</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> info);</span><br><span class="line"></span><br><span class="line"><span class="comment">//2. typeof其他类型</span></span><br><span class="line"><span class="keyword">var</span> age;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> age); <span class="comment">//undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//3. null的操作</span></span><br><span class="line"><span class="keyword">var</span> address = <span class="literal">null</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> address); <span class="comment">//object</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//4. ()的作用</span></span><br><span class="line"><span class="comment">//4.1调用函数</span></span><br><span class="line"><span class="comment">// alert(&#x27;123&#x27;)</span></span><br><span class="line"><span class="comment">//4.2 将某一个表达式当作一个整体</span></span><br><span class="line"><span class="keyword">var</span> res = (<span class="number">2</span> + <span class="number">3</span>) * <span class="number">4</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br></pre></td></tr></table></figure>

<ul>
<li>对一个值使用 typeof 操作符 会返回下列字符串之一<br>“undefined”表示值未定义<br>“boolean”表示为布尔值<br>“string”表示为字符串<br>“number”表示为数字<br>“object”表示为对象或 null<br>“function”表示为函数<br>“symbol”表示值为符号</li>
<li>typeof 的用法<br>可能还会遇到 typeof（xxxx），他与 typeof xxxx 一样只是把后面当作整体，并<strong>不是函数调用</strong></li>
</ul>
<h3 id="js-数据类型"><a href="#js-数据类型" class="headerlink" title="js 数据类型"></a>js 数据类型</h3><h4 id="Number-类型"><a href="#Number-类型" class="headerlink" title="Number 类型"></a>Number 类型</h4><ul>
<li><p>number 类型代表整数和浮点数</p>
</li>
<li><p>数字 number 可以做很多操作，比如<code>+ - * /</code>等等</p>
</li>
<li><p>除了常规的数字，还有所谓的特殊的数值：(-)Infinity、NaN、Number.MAX_VALUE、Number.MIN_VALUE</p>
</li>
<li><p>isNaN 判断是不是 NaN</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// isNaN 用于判断是不是NaN</span></span><br><span class="line"><span class="keyword">var</span> res = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">var</span> res1 = <span class="title class_">NaN</span>;</span><br><span class="line"><span class="comment">//          123-&gt;false    NaN-&gt;true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">isNaN</span>(res), <span class="built_in">isNaN</span>(res1));</span><br></pre></td></tr></table></figure>
</li>
<li><p>后续还会讲解</p>
</li>
</ul>
<h4 id="String-类型"><a href="#String-类型" class="headerlink" title="String 类型"></a>String 类型</h4><ul>
<li>js 的字符串必须被括在引号内，有三种方式<br>双引号，单引号，反单引号(ES6)</li>
<li>转义字符(实际开发用的少，要用的时候去查) &#39; &quot; \t \n</li>
<li>字符串本身还有一些操作</li>
</ul>
<p>拼接字符串<code>+</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> nickName = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> info = <span class="string">&#x27;my name is&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info + nickName);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`my name is<span class="subst">$&#123;nickName&#125;</span>`</span>); <span class="comment">//babel 自动帮我们做处理</span></span><br></pre></td></tr></table></figure>

<p>获取字符串的长度</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;hello world!&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="property">length</span>); <span class="comment">//12 有12个字符，空格也算</span></span><br></pre></td></tr></table></figure>

<h4 id="Boolean-类型"><a href="#Boolean-类型" class="headerlink" title="Boolean 类型"></a>Boolean 类型</h4><ul>
<li>布尔类型用于表示真假<br>仅包含两个值:true(真),false(假)</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//是否登陆</span></span><br><span class="line"><span class="keyword">var</span> isLogin = <span class="literal">false</span>;</span><br><span class="line"><span class="comment">//是否是管理员</span></span><br><span class="line"><span class="keyword">var</span> isAdmin = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">var</span> flag = <span class="literal">true</span>;</span><br><span class="line"><span class="comment">//这里的 = = 后续讲，他是一个比较运算</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="number">1</span> == <span class="number">1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure>

<h4 id="Undefined"><a href="#Undefined" class="headerlink" title="Undefined"></a>Undefined</h4><p>Undefined 类型只有一个值，就是 undefined<br>如果我们声明一个变量，但是没有对其进行初始化操作，它默认就是 undefined</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name); <span class="comment">//空字符串，因为name比较特殊，window上有一个默认的name:&quot;&quot;</span></span><br><span class="line"><span class="keyword">var</span> message;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(message); <span class="comment">//undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//可以这样，但是不推荐</span></span><br><span class="line"><span class="keyword">var</span> info = <span class="literal">undefined</span>;</span><br><span class="line"><span class="comment">//一般初始化的时候</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="Object-类型"><a href="#Object-类型" class="headerlink" title="Object 类型"></a>Object 类型</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.Object类型的基本使用</span></span><br><span class="line"><span class="comment">// var name = &#x27;alex&#x27;;</span></span><br><span class="line"><span class="comment">// var age = 18;</span></span><br><span class="line"><span class="comment">// var height = 2.9;</span></span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="attr">height</span>: <span class="number">2.9</span>,</span><br><span class="line">  <span class="attr">isAdult</span>: <span class="literal">true</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person);</span><br><span class="line"><span class="comment">//2.对象类型中的某一个属性</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>);</span><br><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;hello world!&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="property">length</span>); <span class="comment">//包装成一个对象 .去拿到他的length属性值</span></span><br></pre></td></tr></table></figure>

<ul>
<li>Object 类型是一个特殊的类型，我们通常把它称为<strong>引用类型或者复杂类型</strong></li>
<li>语法:<code>var 变量名=&#123;key:value,key:value...&#125;</code></li>
</ul>
<h4 id="Null-类型"><a href="#Null-类型" class="headerlink" title="Null 类型"></a>Null 类型</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.其他类型的初始化</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> isAdmin = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">var</span> person = <span class="literal">null</span>;</span><br><span class="line"><span class="comment">// 在初始化对象的时候，我们不建议初始化为&#123;&#125;，建议初始化为null</span></span><br><span class="line"><span class="comment">//Null 存在的意义 就是对对象来初始化的，而且在转成布尔值的时候会转成false</span></span><br><span class="line"><span class="keyword">if</span> (person) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;分支语句不会执行&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>Null 类型只有一个值 null<br>通常用来初始化对象&#x2F;释放内存</li>
</ul>
<h3 id="数据类型的转换"><a href="#数据类型的转换" class="headerlink" title="数据类型的转换"></a>数据类型的转换</h3><p>隐式转换：大多数情况下，运算符和函数会自动转换类型<br>显示转换：我手动做一些操作来转换</p>
<h3 id="字符串-String-的转换"><a href="#字符串-String-的转换" class="headerlink" title="字符串 String 的转换"></a>字符串 String 的转换</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num1 = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">var</span> isAdmin = <span class="literal">true</span>;</span><br><span class="line"><span class="comment">// 1.隐式</span></span><br><span class="line"><span class="keyword">var</span> num1Str = num1 + <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> ageStr = age + <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> isAdminStr = isAdmin + <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> num1Str);</span><br><span class="line"><span class="comment">//2.显示</span></span><br><span class="line"><span class="keyword">var</span> numStr2 = <span class="title class_">String</span>(num1);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(numStr2, <span class="keyword">typeof</span> numStr2);</span><br></pre></td></tr></table></figure>

<p>隐式:<br>一个字符串和另一个进行+操作</p>
<p>显式:<br>String(你要转换的变量)<br>toString() 后续学</p>
<h3 id="数字-Number-的转换"><a href="#数字-Number-的转换" class="headerlink" title="数字 Number 的转换"></a>数字 Number 的转换</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//隐式</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="string">&#x27;8&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> num2 = <span class="string">&#x27;4&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> res = num1 + num2;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> res); <span class="comment">//string</span></span><br><span class="line"><span class="keyword">var</span> res2 = num1 * num2;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> res2); <span class="comment">//number</span></span><br><span class="line"><span class="comment">//显示 Number()</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(<span class="literal">undefined</span>)); <span class="comment">//NaN</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(<span class="literal">true</span>), <span class="title class_">Number</span>(<span class="literal">false</span>)); <span class="comment">//1 ,0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(<span class="literal">null</span>)); <span class="comment">//0</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(<span class="string">&#x27;abc123&#x27;</span>)); <span class="comment">//NaN</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(<span class="string">&#x27;      123         &#x27;</span>)); <span class="comment">//234</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(<span class="string">&#x27;&#x27;</span>)); <span class="comment">//0</span></span><br></pre></td></tr></table></figure>

<ul>
<li>隐式：在算数运算中 除开+运算以及一边有字符串 其他都是转数字</li>
<li>显式:Number()以及规则</li>
</ul>
<h3 id="Boolean-的转换"><a href="#Boolean-的转换" class="headerlink" title="Boolean 的转换"></a>Boolean 的转换</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//隐式</span></span><br><span class="line"><span class="comment">//1.分支语句</span></span><br><span class="line"><span class="comment">//显示 Boolean()</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(<span class="string">&#x27;&#x27;</span>)); <span class="comment">//false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(<span class="string">&#x27;0&#x27;</span>)); <span class="comment">//true</span></span><br><span class="line"><span class="comment">//个人技巧 - 双取反转布尔</span></span><br><span class="line"><span class="keyword">var</span> info = <span class="string">&#x27;hahahah&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(!!info);</span><br></pre></td></tr></table></figure>

<p>显示：Boolean()<br><strong>0，null,undefined,NaN,””</strong>-&gt;false<br>其他-&gt;true</p>
<h2 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h2><h3 id="运算符-operators-和运算元"><a href="#运算符-operators-和运算元" class="headerlink" title="运算符(operators)和运算元"></a>运算符(operators)和运算元</h3><p>计算机最基本的操作就是执行运算，执行运算就需要使用运算符<br>比如 console.log(20 + 30)，<code>+</code>就是一个运算符<br>算数运算符&#x2F;赋值运算符&#x2F;比较运算符&#x2F;逻辑运算符&#x2F;(位运算符)</p>
<p>运算元 – 运算符的应用对象<br><code>5 * 2</code><br>左运算元 5，右运算元 2</p>
<h3 id="算数运算符"><a href="#算数运算符" class="headerlink" title="算数运算符"></a>算数运算符</h3><ul>
<li>算数运算符在数学表达式中，<code>+ - * /</code>，在 js 里面和在数学中的使用一样</li>
<li>取余<code>%</code></li>
<li>求幂(es7 也叫 es2016) <code>**</code> <code>2**3 = 8</code></li>
</ul>
<h3 id="赋值运算符"><a href="#赋值运算符" class="headerlink" title="赋值运算符"></a>赋值运算符</h3><ul>
<li><code>=</code>也是一个运算符，被称为赋值(assignments)运算符</li>
<li>链式赋值(chaining assignments)</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a, b, c;</span><br><span class="line">a = b = c = <span class="number">2</span> + <span class="number">2</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c); <span class="comment">//4 4 4</span></span><br></pre></td></tr></table></figure>

<p>链式赋值是<strong>从右到左</strong>计算<br>先对 2+2 进行求值，然后将它赋给：c,b 和 a<br>最后 abc 三个变量共享一个值</p>
<p><strong>不推荐</strong>这种写法</p>
<h4 id="原地修改-Modify-in-place"><a href="#原地修改-Modify-in-place" class="headerlink" title="原地修改(Modify-in-place)"></a>原地修改(Modify-in-place)</h4><p>对一个变量做运算，并将新的结果存储在同一个变量中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> blood = <span class="number">10000</span>;</span><br><span class="line">blood = blood + <span class="number">100</span>;</span><br></pre></td></tr></table></figure>

<p>上述的操作可以用<code>+=</code>来表示</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> blood = <span class="number">10000</span>;</span><br><span class="line">blood += <span class="number">100</span>;</span><br></pre></td></tr></table></figure>

<p>所有的算术运算符(和位运算符)都可以有简短的修改并赋值的运算符<br><code>+= -= /= *= **= %=</code></p>
<h3 id="自增和自减"><a href="#自增和自减" class="headerlink" title="自增和自减"></a>自增和自减</h3><ul>
<li>对一个数进行加一，减一是实际开发中非常常见的操作</li>
<li>因此，有了专门的运算符</li>
<li><code>++</code>将会让变量+1 <code>--</code>将会让变量 -1</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> currentIndex = <span class="number">5</span>;</span><br><span class="line">currentIndex--;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(currentIndex); <span class="comment">//4</span></span><br></pre></td></tr></table></figure>

<h4 id="和–的位置"><a href="#和–的位置" class="headerlink" title="++和–的位置"></a>++和–的位置</h4><ul>
<li>可以放到变量前面，也可以放到变量后面<br>当运算符置于变量前:<strong>前置形式</strong>（prefix form） ++count<br>当运算符置于变量后:<strong>后置形式</strong>(postfix form) count++</li>
<li>有区别？<br>有，但是<strong>只有当我们使用++&#x2F;–的返回值时</strong>才能看到区别<br>如果不使用，那没什么区别<br>如果你想要对变量自增，而且需要<strong>立即使用自增的结果</strong>那就用前置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> currentIndex = <span class="number">5</span>;</span><br><span class="line"><span class="comment">// //自己 ++或者-- 放在前/后 没有任何区别</span></span><br><span class="line"><span class="comment">// ++currentIndex;</span></span><br><span class="line"><span class="comment">// console.log(currentIndex);</span></span><br><span class="line"><span class="comment">//-----elegant hr-----</span></span><br><span class="line"><span class="comment">//如果自增或者自减的表达式本身参与了其他运算，那就有区别</span></span><br><span class="line"><span class="comment">// var res1 = 100 + currentIndex++;</span></span><br><span class="line"><span class="comment">// console.log(currentIndex); //5+1=6</span></span><br><span class="line"><span class="comment">// console.log(res1); //100+5=105</span></span><br><span class="line"><span class="keyword">var</span> res2 = <span class="number">100</span> + ++currentIndex;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(currentIndex); <span class="comment">//6</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res2); <span class="comment">//100+(5+1)=106</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>先用后加，先加后用</p>
</blockquote>
<h4 id="运算符的优先级"><a href="#运算符的优先级" class="headerlink" title="运算符的优先级"></a>运算符的优先级</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> res = <span class="number">2</span> + <span class="number">3</span> * <span class="number">5</span>; <span class="comment">//17</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">5</span>;</span><br><span class="line"><span class="keyword">var</span> result = <span class="number">2</span> + <span class="number">3</span> * ++num; <span class="comment">//20</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence</a></p>
<h3 id="比较运算符"><a href="#比较运算符" class="headerlink" title="比较运算符"></a>比较运算符</h3><ul>
<li>比大小<br>大于&#x2F;小于:<code>a&gt;b,a&lt;b</code><br>大于等于&#x2F;小于等于:<code>a&gt;=b,a&lt;=b</code><br>检查两个值是否相等:<code>a == b</code> <code>a === b</code><br>检查两个值不等:<code>a!=b</code> <code>a !== b</code></li>
<li>比较运算符的结果永远是布尔值</li>
</ul>
<h4 id="和-的区别"><a href="#和-的区别" class="headerlink" title="==和===的区别"></a><code>==</code>和<code>===</code>的区别</h4><p>&#x3D;&#x3D;&#x3D;类型也要一致，&#x3D;&#x3D;不用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo1 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> foo2 = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// == 在类型不相同的情况下会先把运算元转成Number值，再进行比较--隐式转换</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(foo1));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(foo2));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foo1 == foo2); <span class="comment">//true</span></span><br><span class="line"><span class="comment">// === 运算符 在类型不同的情况下，直接返回false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foo1 === foo2); <span class="comment">//false</span></span><br></pre></td></tr></table></figure>

<h4 id="x3D-x3D-的补充-了解"><a href="#x3D-x3D-的补充-了解" class="headerlink" title="&#x3D;&#x3D; 的补充(了解)"></a>&#x3D;&#x3D; 的补充(了解)</h4><p><a target="_blank" rel="noopener" href="https://262.ecma-international.org/5.1/#sec-11.9.3">https://262.ecma-international.org/5.1/#sec-11.9.3</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;jack&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="comment">//重写对象的函数</span></span><br><span class="line">  <span class="comment">//用[]表明是一个计算属性</span></span><br><span class="line">  [<span class="title class_">Symbol</span>.<span class="property">toPrimitive</span>]() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">456</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info == <span class="string">&#x27;456&#x27;</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<h2 id="分支语句"><a href="#分支语句" class="headerlink" title="分支语句"></a>分支语句</h2><h4 id="理解代码块"><a href="#理解代码块" class="headerlink" title="理解代码块"></a>理解代码块</h4><ul>
<li>代码块是多行执行代码的集合，通过一个花括号{}放在一起</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//是代码块</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="keyword">var</span> name = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line">  <span class="keyword">var</span> message = <span class="string">&#x27;my name is &#x27;</span> + name;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(message);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//是对象</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;haha&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="什么是分支结构"><a href="#什么是分支结构" class="headerlink" title="什么是分支结构"></a>什么是分支结构</h4><p>在开发中，我们经常需要根据一定的条件，来决定代码的<strong>执行方向</strong><br>如果条件满足，执行某些代码(块)<br>如果条件不满足，执行另外的代码(块)</p>
<p>分支结构的代码就是让我们根据条件来决定代码的执行</p>
<p>别名:判断结构或者选择结构</p>
<p>js 中:if 和 switch</p>
<h2 id="if-分支语句"><a href="#if-分支语句" class="headerlink" title="if 分支语句"></a>if 分支语句</h2><p>if 的分支的结构有三种<br><code>if...</code><br><code>if...else...</code><br><code>if...else if...else...</code></p>
<h3 id="if…"><a href="#if…" class="headerlink" title="if…"></a>if…</h3><p>if(…)计算括号里的条件表达式，如果计算结果是 true，那就执行相应的代码块</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//如果条件成立，那么执行代码块</span></span><br><span class="line"><span class="keyword">if</span> (条件判断) &#123;</span><br><span class="line">  <span class="comment">//执行的代码块</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>案例:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="number">10</span> &gt; <span class="number">3</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;10比3大&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//1.超过90分这周五不晚修</span></span><br><span class="line"><span class="comment">//声明变量保存分数</span></span><br><span class="line"><span class="keyword">var</span> score = <span class="number">80</span>;</span><br><span class="line"><span class="keyword">if</span> (score &gt; <span class="number">90</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;这周五不晚修&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//2.苹果单价5元/斤 如果购买数量超过3斤，那就立减3元</span></span><br><span class="line"><span class="keyword">var</span> price = <span class="number">5</span>;</span><br><span class="line"><span class="keyword">var</span> weight = <span class="number">7</span>;</span><br><span class="line"><span class="keyword">var</span> totalPrice = price * weight;</span><br><span class="line"><span class="comment">//根据购买的数量来决定是否-3</span></span><br><span class="line"><span class="keyword">if</span> (weight &gt; <span class="number">3</span>) &#123;</span><br><span class="line">  totalPrice -= <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//3.播放列表 currentIndex &#x27;0 1 2&#x27; 3首歌 如果已经是第三首歌 currentIndex=0</span></span><br><span class="line"><span class="comment">// [&#x27;bad girl&#x27;,&#x27;只因你太美&#x27;,&#x27;情人&#x27;]</span></span><br><span class="line"><span class="comment">//    0           1           2</span></span><br><span class="line"><span class="keyword">var</span> currentIndex = <span class="number">2</span>;</span><br><span class="line"><span class="comment">//这里是播放的代码块</span></span><br><span class="line">&#123;</span><br><span class="line">&#125;</span><br><span class="line">currentIndex++;</span><br><span class="line"><span class="keyword">if</span> (currentIndex === <span class="number">3</span>) &#123;</span><br><span class="line">  currentIndex = <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="if-语句的细节补充"><a href="#if-语句的细节补充" class="headerlink" title="if 语句的细节补充"></a>if 语句的细节补充</h4><ol>
<li>如果代码块中只有一行代码，那么{}可以省略</li>
<li>if(…)会计算圆括号内的表达式，并且将结果转换为<strong>布尔类型</strong><ol>
<li>转换规则和 Boolean 函数一样</li>
<li><code>0 &#39;&#39; undefined null NaN</code>都会被转成 false，其他值被转成 true(真值)</li>
</ol>
</li>
</ol>
<h3 id="if…else…语句"><a href="#if…else…语句" class="headerlink" title="if…else…语句"></a>if…else…语句</h3><p>多分支语句:if…else…<br>if 语句包含了一个可选的”else 块”<br>如果条件判断不成立，就会执行 else 块的代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (条件判断) &#123;</span><br><span class="line">  <span class="comment">//条件成立，执行的代码块</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="comment">//条件不成立，执行的代码块</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>案例</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> m = <span class="number">20</span>;</span><br><span class="line"><span class="keyword">var</span> n = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">if</span> (m &gt; n) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;m比n大&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;m不比n大&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//1.分数超过90去长隆，否则去补习班</span></span><br><span class="line"><span class="keyword">var</span> score = <span class="number">89.9</span>;</span><br><span class="line"><span class="keyword">if</span> (score &gt; <span class="number">90</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;去长隆happy&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;去上补习班~&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//2.比较num1和num2的大小，获取较大的数字</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="number">12</span> * <span class="number">6</span> + <span class="number">7</span> * <span class="number">123</span> + <span class="number">3</span> ** <span class="number">2</span>;</span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">789</span> * <span class="number">2</span> + <span class="number">123</span> ** <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> res = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (num1 &gt; num2) &#123;</span><br><span class="line">  res = num1;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  res = num2;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br></pre></td></tr></table></figure>

<h3 id="if…else-if…else…语句"><a href="#if…else-if…else…语句" class="headerlink" title="if…else if…else…语句"></a>if…else if…else…语句</h3><p>判断多个条件<br>else if</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (条件) &#123;</span><br><span class="line">  <span class="comment">//代码块1</span></span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (条件) &#123;</span><br><span class="line">  <span class="comment">//代码块2</span></span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (条件) &#123;</span><br><span class="line">  <span class="comment">//代码块3</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="comment">//代码块4(所有条件都不成立)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// &gt;90 优秀</span></span><br><span class="line"><span class="comment">// 90～&gt;80 良好</span></span><br><span class="line"><span class="comment">// 80～60 及格</span></span><br><span class="line"><span class="comment">// &lt;60 不及格</span></span><br><span class="line"><span class="keyword">var</span> score = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入你的分数&#x27;</span>);</span><br><span class="line">score = <span class="title class_">Number</span>(score);</span><br><span class="line"><span class="comment">//edge deal 分数越界</span></span><br><span class="line"><span class="comment">// if (score &gt; 100 || score &lt; 0) alert(&#x27;不是一个合法成绩数值&#x27;);</span></span><br><span class="line"><span class="keyword">if</span> (score &gt; <span class="number">90</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;优秀&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (score &gt; <span class="number">80</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;良好&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (score &gt;= <span class="number">60</span>) &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;及格&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&#x27;不及格&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="三元运算符"><a href="#三元运算符" class="headerlink" title="三元运算符"></a>三元运算符</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> result = condition ? value1 : value2;</span><br><span class="line">计算结果，如果condition为真则返回value1，如果为假则返回value2</span><br></pre></td></tr></table></figure>

<p>案例</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 案例一：比较两个数字</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">123212</span>;</span><br><span class="line"><span class="comment">//三元运算符</span></span><br><span class="line"><span class="keyword">var</span> result = num1 &gt; num2 ? num1 : num2;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line"><span class="comment">//案例二：输入年龄判断是否成年</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="title function_">prompt</span>(<span class="string">&#x27;请输入您的年龄&#x27;</span>);</span><br><span class="line">age = age - <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> message = age &gt;= <span class="number">18</span> ? <span class="string">&#x27;成年人&#x27;</span> : <span class="string">&#x27;未成年&#x27;</span>;</span><br><span class="line"><span class="title function_">alert</span>(message);</span><br><span class="line"><span class="comment">//案例三(了解) 给变量赋默认值</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> obj = info ? info : &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="逻辑运算符"><a href="#逻辑运算符" class="headerlink" title="逻辑运算符"></a>逻辑运算符</h3><h4 id="认识逻辑运算符"><a href="#认识逻辑运算符" class="headerlink" title="认识逻辑运算符"></a>认识逻辑运算符</h4><ul>
<li><p>主要是三个符号<br><code>||(或) &amp;&amp;（与） !（非）</code></p>
<table>
<thead>
<tr>
<th align="center">运算符</th>
<th align="center">运算规则</th>
<th align="center">范例</th>
<th align="center">结果</th>
</tr>
</thead>
<tbody><tr>
<td align="center">&amp;&amp;</td>
<td align="center">与:同时为真</td>
<td align="center">true&amp;&amp;true</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">||</td>
<td align="center">或:一个为真</td>
<td align="center">true||false</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">!</td>
<td align="center">非：取反</td>
<td align="center">!false</td>
<td align="center">True</td>
</tr>
</tbody></table>
<p>有了逻辑运算符，我们就可以在判断语句中书写多个条件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> chineseScore = <span class="number">88</span>;</span><br><span class="line"><span class="keyword">var</span> mathScore = <span class="number">99</span>;</span><br><span class="line"><span class="comment">//1.逻辑与：&amp;&amp; 并且</span></span><br><span class="line"><span class="comment">//条件1&amp;&amp;条件2&amp;&amp;条件3...</span></span><br><span class="line"><span class="keyword">if</span> (chineseScore &gt; <span class="number">90</span> &amp;&amp; mathScore &gt; <span class="number">90</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;去长隆&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//2.逻辑或 || 或者</span></span><br><span class="line"><span class="keyword">if</span> (chineseScore &gt; <span class="number">90</span> || mathScore &gt; <span class="number">90</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;打一个小时游戏～&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//3.逻辑非 ! 取反</span></span><br><span class="line"><span class="keyword">var</span> isLogin = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">if</span> (!isLogin) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;引导他跳去登陆页登陆&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;正常访问页面&#x27;</span>);</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="逻辑或的本质"><a href="#逻辑或的本质" class="headerlink" title="逻辑或的本质"></a>逻辑或的本质</h4><ul>
<li><p>||表示或运算符(短路或)<br><code>res = a||b</code><br>从左到右计算操作数<br>处理每一个操作数的时候，都将其转化为布尔值<br>如果结果是 true，就停止计算，返回这个操作数的初始值<br>如果所有的操作数的结果都是 false，则返回最后一个操作数的初始值</p>
</li>
<li><p>注意:返回的值是操作数的<strong>初始值</strong>，不是 Boolean 之后的</p>
</li>
<li><p>一个||链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">       1.把运算元转成Boolean类型</span></span><br><span class="line"><span class="comment">       2.对转成Boolean类型进行判断</span></span><br><span class="line"><span class="comment">          如果为true，直接把结果(primitive Value)返回</span></span><br><span class="line"><span class="comment">          如果为false，进行第二个运算元的判断</span></span><br><span class="line"><span class="comment">          以此类推</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> chineseScore = <span class="number">95</span>;</span><br><span class="line"><span class="keyword">var</span> mathScore = <span class="number">99</span>;</span><br><span class="line"><span class="comment">//chineseScore &gt; 90 为true，那么后续的所有判断不再走</span></span><br><span class="line"><span class="keyword">if</span> (chineseScore &gt; <span class="number">90</span> || mathScore &gt; <span class="number">90</span>) &#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//获取第一个有值的结果/兜底默认值处理</span></span><br><span class="line"><span class="keyword">var</span> info = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">var</span> message = info || <span class="string">&#x27;我是默认值&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(message.<span class="property">length</span>); <span class="comment">//3</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">true</span> || <span class="literal">false</span>); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">NaN</span> || <span class="number">1</span> || <span class="literal">true</span> || <span class="literal">false</span> || <span class="number">1</span> &gt; <span class="number">2</span>); <span class="comment">//1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;abc&#x27;</span> || <span class="number">123</span>); <span class="comment">//&#x27;abc&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">0</span> || <span class="string">&#x27; &#x27;</span>); <span class="comment">//&quot; &quot;</span></span><br><span class="line"><span class="number">10</span> &gt; <span class="number">20</span> || <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;haha&#x27;</span>); <span class="comment">//&#x27;haha&#x27;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>遇真短路</p>
</blockquote>
<h4 id="逻辑与的本质"><a href="#逻辑与的本质" class="headerlink" title="逻辑与的本质"></a>逻辑与的本质</h4><ul>
<li>&amp;&amp;表示与运算(短路与)</li>
<li>从左到右依次计算操作数</li>
<li>在处理每个操作数时，都将其转成布尔值</li>
<li>如果结果是 false，就停止计算，返回该 Operators 的 primitive value</li>
<li>如果所有的操作数都被计算过，则返回最后一个操作数的原始值</li>
<li>与运算 返回第一个假值，如果没有 false value，返回最后一个值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 运算元1 &amp;&amp; 运算元2 &amp;&amp; 运算元3...</span></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      1.拿到第一个运算元，将运算元转成布尔值</span></span><br><span class="line"><span class="comment">      2.对布尔值进行判断</span></span><br><span class="line"><span class="comment">          如果false，返回运算元的原始值</span></span><br><span class="line"><span class="comment">          如果true，继续下一个运算元</span></span><br><span class="line"><span class="comment">          依此类推</span></span><br><span class="line"><span class="comment">      3.如果所有的运算元都为true，那就返回最后一个运算元的初始值</span></span><br><span class="line"><span class="comment">      遇假短路    </span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> chineseScore = <span class="number">80</span>;</span><br><span class="line"><span class="keyword">var</span> mathScore = <span class="number">99</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(chineseScore &gt; <span class="number">90</span> &amp;&amp; mathScore &gt; <span class="number">90</span>); <span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//应用场景</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;jack&#x27;</span>,</span><br><span class="line">  <span class="comment">// friend: &#123;</span></span><br><span class="line">  <span class="comment">//   name: &#x27;alex&#x27;,</span></span><br><span class="line">  <span class="comment">//   say: function () &#123;</span></span><br><span class="line">  <span class="comment">//     console.log(&#x27;giao~&#x27;);</span></span><br><span class="line">  <span class="comment">//   &#125;,</span></span><br><span class="line">  <span class="comment">// &#125;,</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// obj.friend.say();</span></span><br><span class="line"><span class="comment">//实际开发我们也就写两个或者三个，不会写这么长</span></span><br><span class="line">obj &amp;&amp; obj.<span class="property">friend</span> &amp;&amp; obj.<span class="property">friend</span>.<span class="property">say</span> &amp;&amp; obj.<span class="property">friend</span>.<span class="title function_">say</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;abc&#x27;</span> &amp;&amp; <span class="literal">null</span>); <span class="comment">//null</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">null</span> &amp;&amp; <span class="string">&#x27;abc&#x27;</span>); <span class="comment">//null</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">null</span> &amp;&amp; <span class="literal">undefined</span>); <span class="comment">//null</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="literal">undefined</span> &amp;&amp; <span class="literal">null</span>); <span class="comment">//undefined</span></span><br><span class="line"><span class="number">10</span> &gt; <span class="number">20</span> &amp;&amp; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;haha&#x27;</span>); <span class="comment">//false</span></span><br></pre></td></tr></table></figure>

<h4 id="非运算"><a href="#非运算" class="headerlink" title="非运算"></a>非运算</h4><p>双取布尔反转<br>求任意变量的布尔值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="literal">null</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Boolean</span>(obj), !!obj);</span><br></pre></td></tr></table></figure>

<h2 id="switch-语句"><a href="#switch-语句" class="headerlink" title="switch 语句"></a>switch 语句</h2><p>switch 开关 岔路<br>case 方案 情况<br>break 打断、断开<br>default 默认(缺省)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span> (常量 / 变量) &#123;</span><br><span class="line">  <span class="keyword">case</span> 常量<span class="number">1</span>:</span><br><span class="line">    <span class="comment">//语句1</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> 常量<span class="number">2</span>:</span><br><span class="line">    <span class="comment">//语句2</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="attr">default</span>:</span><br><span class="line">  <span class="comment">//语句三</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>switch 是全等的(&#x3D;&#x3D;&#x3D;)判断</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// switch (常量 / 变量) &#123;</span></span><br><span class="line"><span class="comment">//   case 常量1:</span></span><br><span class="line"><span class="comment">//     //语句1</span></span><br><span class="line"><span class="comment">//     break;</span></span><br><span class="line"><span class="comment">//   case 常量2:</span></span><br><span class="line"><span class="comment">//     //语句2</span></span><br><span class="line"><span class="comment">//     break;</span></span><br><span class="line"><span class="comment">//   default:</span></span><br><span class="line"><span class="comment">//   //语句三</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">//上一首0  播放/⏸️ 1  下一首 2</span></span><br><span class="line"><span class="comment">// var btnIndex = 0</span></span><br><span class="line"><span class="comment">// if(btnIndex===0)&#123;</span></span><br><span class="line"><span class="comment">//   console.log(&quot;点击了上一首按钮&quot;);</span></span><br><span class="line"><span class="comment">// &#125;else if(===1)&#123;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// &#125;else if(===2)&#123;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// &#125;else&#123;</span></span><br><span class="line"><span class="comment">//   //123</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="keyword">var</span> btnIndex = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">switch</span> (btnIndex) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;上一首&#x27;</span>);</span><br><span class="line">    <span class="comment">//不加break会穿透</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;play/pause&#x27;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;next&#x27;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="attr">default</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;有问题&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol>
<li>月份案例</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//月份案例</span></span><br><span class="line"><span class="comment">//已知1～12 表示1～12月</span></span><br><span class="line"><span class="comment">//2月统一按照28天来算</span></span><br><span class="line"><span class="comment">// 根据月份判断当月天数</span></span><br><span class="line"><span class="keyword">var</span> month = <span class="number">12</span>;</span><br><span class="line"><span class="comment">//28 30 31</span></span><br><span class="line"><span class="comment">//2  4 6 9 11   1 3 5 7 8 10 12</span></span><br><span class="line"><span class="keyword">switch</span> (month) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">10</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">12</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;31天&#x27;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">9</span>:</span><br><span class="line">  <span class="keyword">case</span> <span class="number">11</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;30天&#x27;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;28天&#x27;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="attr">default</span>:</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;请输入正确的月份&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>天数案例</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//天数</span></span><br><span class="line"><span class="comment">//求2023 3月 31日是2023 的第几天</span></span><br><span class="line"><span class="keyword">var</span> year = <span class="number">2023</span>;</span><br><span class="line"><span class="keyword">var</span> month = <span class="number">3</span>;</span><br><span class="line"><span class="keyword">var</span> date = <span class="number">31</span>;</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      不管年份，2月统一按照28天去算</span></span><br><span class="line"><span class="comment">      到最后判断 是否是3月及以上 去看要不要补上一天</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      先不管日期，计算完月份之后，几号我就多加几天</span></span><br><span class="line"><span class="comment">      month -&gt;1</span></span><br><span class="line"><span class="comment">      2   加上整个1月的天数</span></span><br><span class="line"><span class="comment">      3   加上1，2月的天数</span></span><br><span class="line"><span class="comment">      ...</span></span><br><span class="line"><span class="comment">      12  1+2+3+...+11</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">switch</span> (month) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">12</span>:</span><br><span class="line">    result += <span class="number">30</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">11</span>:</span><br><span class="line">    result += <span class="number">31</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">10</span>:</span><br><span class="line">    result += <span class="number">30</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">9</span>:</span><br><span class="line">    result += <span class="number">31</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">    result += <span class="number">31</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">    result += <span class="number">30</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">    result += <span class="number">31</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">    result += <span class="number">30</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">    result += <span class="number">31</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">    <span class="comment">//判断闰年？</span></span><br><span class="line">    <span class="keyword">if</span> ((year % <span class="number">4</span> === <span class="number">0</span> &amp;&amp; year % <span class="number">100</span> !== <span class="number">0</span>) || year % <span class="number">400</span> === <span class="number">0</span>) &#123;</span><br><span class="line">      result += <span class="number">29</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      result += <span class="number">28</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">    result += <span class="number">31</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">    <span class="comment">//几号就加几天</span></span><br><span class="line">    result += date;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="循环语句"><a href="#循环语句" class="headerlink" title="循环语句"></a>循环语句</h2><p>循环是一种重复运行同一代码的方式<br>如果是对某个列表进行循环，我们通常也会称为遍历(traversal)或者迭代(iteration)</p>
<p>在 js 中支持三种循环方式<br>while<br>do…while<br>for</p>
<blockquote>
<p>1.什么时候开始循环 2.什么时候结束循环 3.步长(step)每次循环变量改变了多少</p>
</blockquote>
<h3 id="while-循环"><a href="#while-循环" class="headerlink" title="while 循环"></a>while 循环</h3><p>while 循环的语法如下:<br>当条件成立的时候，执行循环代码<br>当条件不成立的时候，跳出代码块</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span> (循环条件) &#123;</span><br><span class="line">  <span class="comment">//循环的代码 循环体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="E:\蓝景培训\课程笔记\js\assets\2023-04-03-14-55-21.png" alt="2023-04-03-14-55-21.png"></p>
<p>如果条件一直为真,那么就会产生死循环(dead loop)<br>开发中一定要避免死循环</p>
<p>练习</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//练习一 打印10次hello world</span></span><br><span class="line"><span class="comment">// var count = 0;</span></span><br><span class="line"><span class="comment">// while (count &lt; 10) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(&#x27;hello world&#x27;);</span></span><br><span class="line"><span class="comment">//   count++;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">//练习二 打印0-99的数字</span></span><br><span class="line"><span class="comment">// var count = 0;</span></span><br><span class="line"><span class="comment">// while (count &lt; 100) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(count);</span></span><br><span class="line"><span class="comment">//   count++;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">//练习三 计算0～99的数字和</span></span><br><span class="line"><span class="comment">// var count = 0;</span></span><br><span class="line"><span class="comment">// var totalSum = 0;</span></span><br><span class="line"><span class="comment">// while (count &lt; 100) &#123;</span></span><br><span class="line"><span class="comment">//   totalSum += count;</span></span><br><span class="line"><span class="comment">//   count++;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">//练习四 计算0～99的所有odd 奇数和</span></span><br><span class="line"><span class="comment">// if (num % 2 !== 0) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(&#x27;num是odd数&#x27;);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// var count = 0;</span></span><br><span class="line"><span class="comment">// var totalSum = 0;</span></span><br><span class="line"><span class="comment">// while (count &lt; 100) &#123;</span></span><br><span class="line"><span class="comment">//   if (count % 2 !== 0) &#123;</span></span><br><span class="line"><span class="comment">//     totalSum += count;</span></span><br><span class="line"><span class="comment">//   &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//   count++;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// console.log(&#x27;所有奇数和&#x27;, totalSum);</span></span><br><span class="line"><span class="comment">//练习五 计算0～99的所有even 偶数和</span></span><br><span class="line"><span class="comment">// var count = 0;</span></span><br><span class="line"><span class="comment">// var totalSum = 0;</span></span><br><span class="line"><span class="comment">// while (count &lt; 100) &#123;</span></span><br><span class="line"><span class="comment">//   if (count % 2 === 0) &#123;</span></span><br><span class="line"><span class="comment">//     totalSum += count;</span></span><br><span class="line"><span class="comment">//   &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//   count++;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// console.log(&#x27;所有偶数和&#x27;, totalSum);</span></span><br><span class="line"><span class="comment">//优化</span></span><br><span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> totalSum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span> (count &lt; <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="comment">//0 是偶数</span></span><br><span class="line">  totalSum += count;</span><br><span class="line">  count += <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;所有偶数和&#x27;</span>, totalSum);</span><br><span class="line"></span><br><span class="line"><span class="comment">//1～100内所有偶数 打印出来</span></span><br><span class="line"><span class="comment">// var n = 1;</span></span><br><span class="line"><span class="comment">// while (n &lt;= 100) &#123;</span></span><br><span class="line"><span class="comment">//   if (n % 2 === 0) console.log(n);</span></span><br><span class="line"><span class="comment">//   n++;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">//优化</span></span><br><span class="line"><span class="comment">// var n = 2;</span></span><br><span class="line"><span class="comment">// while (n &lt;= 100) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(n);</span></span><br><span class="line"><span class="comment">//   n += 2;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="do…while-循环"><a href="#do…while-循环" class="headerlink" title="do…while 循环"></a>do…while 循环</h3><p>do…while 的特点是不管条件成立与否，do 循环体都会先执行一次</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  <span class="comment">//循环体</span></span><br><span class="line">&#125; <span class="keyword">while</span> (循环条件);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">1000</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我执行了一次&#x27;</span>);</span><br><span class="line">  num++;</span><br><span class="line">&#125; <span class="keyword">while</span> (num &lt; <span class="number">10</span>);</span><br></pre></td></tr></table></figure>

<p>练习</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//打印10次hello world</span></span><br><span class="line"><span class="keyword">var</span> n = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello world&#x27;</span>);</span><br><span class="line">  n++;</span><br><span class="line">&#125; <span class="keyword">while</span> (n &lt; <span class="number">10</span>);</span><br><span class="line"><span class="comment">//计算0～10的数字和</span></span><br><span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  sum += count;</span><br><span class="line">  count++;</span><br><span class="line">&#125; <span class="keyword">while</span> (count &lt;= <span class="number">10</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sum); <span class="comment">//1+...+10 55</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">      count 0     1    2  ...     8       9       10</span></span><br><span class="line"><span class="comment">      sum  0+0 0+0+1  1+2 ... 1+2+...+8  1+..+9 1+...+10</span></span><br><span class="line"><span class="comment">      */</span></span><br></pre></td></tr></table></figure>

<h3 id="for-循环-重点"><a href="#for-循环-重点" class="headerlink" title="for 循环(重点)"></a>for 循环(重点)</h3><p>for 循环看上去更加复杂，但是他是最常用的循环形式<br>语法<code>for(初始变量;条件判断;步长)&#123;代码&#125;</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (begin; condition; step) &#123;</span><br><span class="line">  <span class="comment">//循环代码块</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>注意:循环是<strong>条件、步长、代码</strong>三者在循环</p>
<p>练习</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// for (var i = 0; i &lt; 3; i++) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(i);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">//练习一 打印10次hello world</span></span><br><span class="line"><span class="comment">//练习二 打印0-99的数字</span></span><br><span class="line"><span class="comment">//略</span></span><br><span class="line"><span class="comment">//练习三 计算0～99的数字和</span></span><br><span class="line"><span class="comment">// var totalCount = 0;</span></span><br><span class="line"><span class="comment">// for (var i = 0; i &lt; 100; i++) &#123;</span></span><br><span class="line"><span class="comment">//   // totalCount=totalCount+i ;</span></span><br><span class="line"><span class="comment">//   totalCount += i;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// console.log(totalCount);</span></span><br><span class="line"><span class="comment">//练习四 计算0～99的所有odd 奇数和</span></span><br><span class="line"><span class="comment">// var totalCount = 0;</span></span><br><span class="line"><span class="comment">// for (var i = 0; i &lt; 100; i++) &#123;</span></span><br><span class="line"><span class="comment">//   // totalCount=totalCount+i ;</span></span><br><span class="line"><span class="comment">//   if (i % 2 !== 0) &#123;</span></span><br><span class="line"><span class="comment">//     totalCount += i;</span></span><br><span class="line"><span class="comment">//   &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// console.log(totalCount);</span></span><br><span class="line"><span class="comment">//练习五 计算0～99的所有even 偶数和</span></span><br><span class="line"><span class="comment">// var totalCount = 0;</span></span><br><span class="line"><span class="comment">// for (var i = 0; i &lt; 100; i++) &#123;</span></span><br><span class="line"><span class="comment">//   // totalCount=totalCount+i ;</span></span><br><span class="line"><span class="comment">//   if (i % 2 === 0) &#123;</span></span><br><span class="line"><span class="comment">//     totalCount += i;</span></span><br><span class="line"><span class="comment">//   &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// console.log(totalCount);</span></span><br><span class="line"><span class="comment">//优化</span></span><br><span class="line"><span class="keyword">var</span> totalCount = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">100</span>; i += <span class="number">2</span>) &#123;</span><br><span class="line">  <span class="comment">// totalCount=totalCount+i ;</span></span><br><span class="line">  <span class="keyword">if</span> (i % <span class="number">2</span> === <span class="number">0</span>) &#123;</span><br><span class="line">    totalCount += i;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(totalCount);</span><br></pre></td></tr></table></figure>

<h3 id="循环控制语句"><a href="#循环控制语句" class="headerlink" title="循环控制语句"></a>循环控制语句</h3><ol>
<li><p>break 直接跳出循环，循环结束</p>
</li>
<li><p>continue 跳过本次迭代，继续下一次</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//吃包子</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">10</span>; i++) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我吃了一个包子&#x27;</span>);</span><br><span class="line">  <span class="keyword">if</span> (i === <span class="number">3</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;第三个掉地上了，但是剩下的我还要吃&#x27;</span>);</span><br><span class="line">    <span class="comment">// break;</span></span><br><span class="line">    <span class="keyword">continue</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="循环的嵌套"><a href="#循环的嵌套" class="headerlink" title="循环的嵌套"></a>循环的嵌套</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//for的嵌套</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">3</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//外层循环走一步， i增加1</span></span><br><span class="line">  <span class="comment">//内层循环走全程，j从1到2</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">1</span>; j &lt;= <span class="number">2</span>; j++) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;i是&#x27;</span>, i, <span class="string">&#x27;j是&#x27;</span>, j);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>练习</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在屏幕上显示一个❤️</span></span><br><span class="line"><span class="comment">// document.write(&#x27;❤️&#x27;);</span></span><br><span class="line"><span class="comment">// for (var i = 0; i &lt; 9; i++) &#123;</span></span><br><span class="line"><span class="comment">//   document.write(&#x27;&lt;div&gt;&#x27;);</span></span><br><span class="line"><span class="comment">//   for (var j = 0; j &lt; 9; j++) &#123;</span></span><br><span class="line"><span class="comment">//     document.write(&#x27;❤️&#x27;);</span></span><br><span class="line"><span class="comment">//   &#125;</span></span><br><span class="line"><span class="comment">//   document.write(&#x27;&lt;/div&gt;&#x27;);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">//三角❤️</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">9</span>; i++) &#123;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;&lt;div&gt;&#x27;</span>);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; i + <span class="number">1</span>; j++) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;❤️&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;&lt;/div&gt;&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>作业相关</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//随机生成数字</span></span><br><span class="line"><span class="comment">//  Math.random()  [0,1)</span></span><br><span class="line"><span class="comment">//生成一个0～99的随机数  0,1 -&gt; [0,100) 99</span></span><br><span class="line"><span class="keyword">var</span> randomNum = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">100</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(randomNum);</span><br></pre></td></tr></table></figure>

<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul>
<li>三种循环<ul>
<li>while</li>
<li>do…while</li>
<li>for(;;)</li>
</ul>
</li>
<li>break&#x2F;continue</li>
</ul>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><h3 id="程序里面的-foo、bar、baz"><a href="#程序里面的-foo、bar、baz" class="headerlink" title="程序里面的 foo、bar、baz"></a>程序里面的 foo、bar、baz</h3><p>通常被用来作为<strong>函数、变量、文件</strong>的命名<br>目前已经变成了<strong>编程术语</strong>的一部份<br>他们本身并<strong>没有特殊的用途和意义</strong><br>被称为“伪变量”</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//stackover flow</span></span><br><span class="line"><span class="keyword">var</span> foo = xxxxxx;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">bar</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="keyword">var</span> baz = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="函数的定义"><a href="#函数的定义" class="headerlink" title="函数的定义"></a>函数的定义</h3><p>函数其实就是某种特定功能的代码的封装</p>
<p>函数的使用：</p>
<ol>
<li><p>声明函数–封装 独立的功能<br>在 js 中也可以称为定义函数<br>声明函数的过程是对某些功能的封装<br>在后续开发中，我们会根据不同的需求定义很多函数</p>
</li>
<li><p>调用函数–享受封装的成果<br>也称为函数调用</p>
</li>
</ol>
<p>函数的作用：提高开发效率，复用代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">//实现非常复杂的功能</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure>

<h3 id="函数的声明和调用"><a href="#函数的声明和调用" class="headerlink" title="函数的声明和调用"></a>函数的声明和调用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明一个函数</span></span><br><span class="line"><span class="comment">//制作好一个工具，但是这个工具默认情况下是不会被使用的</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayHello</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//函数的调用</span></span><br><span class="line"><span class="comment">//使用工具</span></span><br><span class="line"><span class="title function_">sayHello</span>();</span><br></pre></td></tr></table></figure>

<p>语法:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> 函数名() &#123;</span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">  <span class="comment">//函数封装的代码</span></span><br><span class="line">&#125;</span><br><span class="line">函数名();</span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ol>
<li>函数的命名规则和之前的变量命名规则一样</li>
<li>函数要尽量做到见名知意(函数通常使用动词更多)</li>
<li>函数定义完后，里面的代码不会执行，必须调用才会执行</li>
</ol>
<h3 id="函数的参数"><a href="#函数的参数" class="headerlink" title="函数的参数"></a>函数的参数</h3><p>增加函数的通用性，针对相同的逻辑处理，能适应更多变的数据就有了函数的参数</p>
<ul>
<li>在函数的内部，把参数当作变量使用，进行你要的处理</li>
<li>函数调用时，按照函数参数的定义时的顺序，传递进去</li>
<li>形参(param):<strong>定义</strong>函数时，小括号中的参数，是用来接受实际参数用的，在函数内部作为变量使用</li>
<li>实参(argument):<strong>调用</strong>函数时,小括号中的参数,是用来把真实的数据传递到函数内部用的</li>
</ul>
<h3 id="函数的返回值"><a href="#函数的返回值" class="headerlink" title="函数的返回值"></a>函数的返回值</h3><p>return 关键字来定义返回值<br>return 除了返回值以外还能终止函数的执行</p>
<h3 id="arguments-实参列表"><a href="#arguments-实参列表" class="headerlink" title="arguments 实参列表"></a>arguments 实参列表</h3><p>函数内部存在特别的对象:arguments 对象<br>里面存放的是函数接受到的所有实际参数<br>他的数据类型是一个 object 类型，伪数组(array-like)</p>
<h3 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h3><p>函数自己调用自己有一个专业的名词，叫递归(Recursion)</p>
<p>将一个复杂的任务，转化成重复执行的相同(小)任务。</p>
<h3 id="局部和全局变量"><a href="#局部和全局变量" class="headerlink" title="局部和全局变量"></a>局部和全局变量</h3><h4 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h4><p>在 js(es6 之前)中没有块级作用域的概念的，但是函数是可以定义自己的作用域的</p>
<ul>
<li>作用域(Scope)：表示一些标识符的作用有效范围(那块代码这个变量可以使用)</li>
<li>函数作用域:表示在函数内部定义的变量，只有函数内部可以访问到</li>
</ul>
<h4 id="局部和全局变量-1"><a href="#局部和全局变量-1" class="headerlink" title="局部和全局变量"></a>局部和全局变量</h4><ul>
<li>局部变量:定义在函数内部的变量，称为局部变量</li>
<li>外部变量:定义在函数外部的变量,称为外部变量</li>
<li>全局变量:在任何函数中&#x2F;函数外都能访问到的变量，就是全局变量(var 声明的全局变量是在 window 上添加一个属性)</li>
</ul>
<h4 id="变量的访问顺序"><a href="#变量的访问顺序" class="headerlink" title="变量的访问顺序"></a>变量的访问顺序</h4><p>在函数中访问变量时，优先找自己，如果自己没有就去外部找，最终找到 window 都没有那就报错</p>
<ul>
<li>块级作用域，作用域链，变量提升，AO，VO，GO 高阶学习</li>
</ul>
<h3 id="函数的头等公民"><a href="#函数的头等公民" class="headerlink" title="函数的头等公民"></a>函数的头等公民</h3><p>函数的表达式(Function Expressions)<br>在 js 中函数并不是神奇的语法结构，而是一种特殊的值(是一种特殊的对象 Object 类型)<br>之前我们定义函数的方式–函数的声明(Function Declaration)<br>其实，还有另一种写法是函数表达式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;foo函数&#x27;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>头等函数(first-class-function:第一级函数),指在程序设计语言中，函数被当作头等公民</p>
<ul>
<li>函数可以作为其他函数的参数、函数的返回值、赋值给变量、或者存储在其他的数据结构中</li>
<li>通常对头等函数的编程方式，称为函数式编程。</li>
</ul>
<h3 id="回调函数（callback-function）"><a href="#回调函数（callback-function）" class="headerlink" title="回调函数（callback function）"></a>回调函数（callback function）</h3><p>高阶函数必须满足以下两个条件之一</p>
<ul>
<li>接收一个&#x2F;多个函数作为参数</li>
<li>输出一个函数(返回一个函数)</li>
</ul>
<h3 id="立即执行函数"><a href="#立即执行函数" class="headerlink" title="立即执行函数"></a>立即执行函数</h3><p>Immediately-Invoked Function Expression(IIFE)</p>
<h3 id="预解析"><a href="#预解析" class="headerlink" title="预解析"></a>预解析</h3><ul>
<li>在所有代码执行之前，对代码进行通读并解释</li>
</ul>
<h4 id="预解析-var-关键字"><a href="#预解析-var-关键字" class="headerlink" title="预解析 var 关键字"></a>预解析 var 关键字</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//undefined</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="comment">//解析var关键字</span></span><br><span class="line"><span class="comment">//1. var num</span></span><br><span class="line"><span class="comment">//2. num=100</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//100</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">打开页面</span></span><br><span class="line"><span class="comment">  预解析</span></span><br><span class="line"><span class="comment">    =&gt; var num</span></span><br><span class="line"><span class="comment">      -&gt;告诉浏览器我定义一个变量叫num，但是没有赋值</span></span><br><span class="line"><span class="comment">  执行代码</span></span><br><span class="line"><span class="comment">    = 第一行代码 在控制台打印num</span></span><br><span class="line"><span class="comment">      - 因为预解析的时候，已经声明过num变量，但是没有赋值</span></span><br><span class="line"><span class="comment">      - num存在，但是没有值</span></span><br><span class="line"><span class="comment">      - undefined</span></span><br><span class="line"><span class="comment">    = 第二行代码</span></span><br><span class="line"><span class="comment">      - 给已经声明的num赋值为100</span></span><br><span class="line"><span class="comment">    = 第三行代码</span></span><br><span class="line"><span class="comment">      - 打印num变量</span></span><br><span class="line"><span class="comment">      - 由于第二行代码的执行 num已经被赋值为100</span></span><br><span class="line"><span class="comment">      - 打印100    </span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fn</span>();</span><br><span class="line"><span class="keyword">var</span> fn = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是fn&#x27;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="title function_">fn</span>();</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">  1 fn()</span></span><br><span class="line"><span class="comment">  2 var fn = funciton()&#123;&#125;</span></span><br><span class="line"><span class="comment">  3 fn()</span></span><br><span class="line"><span class="comment">  打开页面</span></span><br><span class="line"><span class="comment">    预解析</span></span><br><span class="line"><span class="comment">      = var fn</span></span><br><span class="line"><span class="comment">        - 告诉浏览器我定义了一个变量叫fn，但是没有赋值</span></span><br><span class="line"><span class="comment">    执行代码</span></span><br><span class="line"><span class="comment">      = 第一行代码 fn()</span></span><br><span class="line"><span class="comment">        - 把fn变量名，当作函数名来调用</span></span><br><span class="line"><span class="comment">        - 但是fn只是声明了变量，并没有赋值，所以fn是undefined</span></span><br><span class="line"><span class="comment">        - 我们就相当于在做 undefined()</span></span><br><span class="line"><span class="comment">        - 报错 fn is not a function    </span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h4 id="解析-声明式-函数"><a href="#解析-声明式-函数" class="headerlink" title="解析 声明式 函数"></a>解析 声明式 函数</h4><ul>
<li>在所有代码执行前，把函数名进行声明提前，并且赋值为一个函数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fn</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是fn&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>();</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">1 fn()</span></span><br><span class="line"><span class="comment">2 function fn()&#123;&#125;</span></span><br><span class="line"><span class="comment">3 fn()</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">打开页面</span></span><br><span class="line"><span class="comment">  预解析</span></span><br><span class="line"><span class="comment">    = function fn()&#123;&#125;</span></span><br><span class="line"><span class="comment">    - 告诉浏览器，我定义了一个fn变量，并且这个fn变量里面保存的是一个函数</span></span><br><span class="line"><span class="comment">  代码执行</span></span><br><span class="line"><span class="comment">    = 第一行代码 fn()</span></span><br><span class="line"><span class="comment">      - 拿到fn变量保存的值，当作一个函数来使用</span></span><br><span class="line"><span class="comment">      - 因为预解析阶段，fn里面就是一个函数</span></span><br><span class="line"><span class="comment">      - 正常调用 不报错</span></span><br><span class="line"><span class="comment">    = 第二行代码</span></span><br><span class="line"><span class="comment">    = 第三行代码</span></span><br><span class="line"><span class="comment">      - 拿到fn变量保存的值，当作一个函数来使用</span></span><br><span class="line"><span class="comment">      - 因为预解析阶段，fn里面就是一个函数</span></span><br><span class="line"><span class="comment">      - 正常调用 不报错</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h4 id="预解析的无节操"><a href="#预解析的无节操" class="headerlink" title="预解析的无节操"></a>预解析的无节操</h4><ol>
<li>不管 if 是否为 true，if 里面的代码依旧会预解析</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line"><span class="keyword">if</span> (<span class="literal">false</span>) &#123;</span><br><span class="line">  <span class="comment">//var num会提升到最顶上，但是num=100赋值操作还是留在原地</span></span><br><span class="line">  <span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num);</span><br><span class="line"></span><br><span class="line"><span class="comment">//相当于如下代码</span></span><br><span class="line"><span class="keyword">var</span> num;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//undefined</span></span><br><span class="line"><span class="keyword">if</span> (<span class="literal">false</span>) &#123;</span><br><span class="line">  num = <span class="number">100</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//undefined</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>函数体内，return 后面的代码虽然不执行，但是还是会预解析</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是fn内的代码&#x27;</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(anum); <span class="comment">//undefined  不会报错，因为var anum提升到函数作用域内的顶部</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span>;</span><br><span class="line">  <span class="keyword">var</span> anum = <span class="number">100</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(anum);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//相当于如下代码</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> anum;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是fn内的代码&#x27;</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(anum);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span>;</span><br><span class="line">  <span class="keyword">var</span> anum = <span class="number">100</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(anum);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>();</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>重名问题</li>
</ol>
<ul>
<li>当你使用 var 定义的变量 和 声明式的函数 重名的时候 以函数为准</li>
<li>只在预解析阶段以函数为准</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">num</span>();</span><br><span class="line"><span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="title function_">num</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">num</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是num&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">num</span>();</span><br><span class="line"><span class="comment">//相当于如下代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">num</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我是num&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> num;</span><br><span class="line"><span class="title function_">num</span>();</span><br><span class="line">num = <span class="number">100</span>;</span><br><span class="line"><span class="title function_">num</span>();</span><br><span class="line"><span class="title function_">num</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">1 num();</span></span><br><span class="line"><span class="comment">2 var num = 100;</span></span><br><span class="line"><span class="comment">3 num();</span></span><br><span class="line"><span class="comment">4 function num() &#123; console.log(&#x27;我是num&#x27;);&#125;</span></span><br><span class="line"><span class="comment">5 num();</span></span><br><span class="line"><span class="comment">  打开页面</span></span><br><span class="line"><span class="comment">    预解析</span></span><br><span class="line"><span class="comment">    = var num</span></span><br><span class="line"><span class="comment">      - 告诉浏览器我定义了一个变量叫做num，但是没有赋值</span></span><br><span class="line"><span class="comment">    = function num()&#123;&#125;</span></span><br><span class="line"><span class="comment">      - 告诉浏览器，我定义了一个变量叫num，里面放的是头等公民--函数</span></span><br><span class="line"><span class="comment">    = 预解析结束</span></span><br><span class="line"><span class="comment">      - num里面放的是函数</span></span><br><span class="line"><span class="comment">    执行代码</span></span><br><span class="line"><span class="comment">      1 num()</span></span><br><span class="line"><span class="comment">        - 拿到num内的值，当作函数调用</span></span><br><span class="line"><span class="comment">        - 因为预解析，所以正常调用</span></span><br><span class="line"><span class="comment">      2 num=100</span></span><br><span class="line"><span class="comment">        - 把变量num内的值，我不管你之前里面是什么，现在是100</span></span><br><span class="line"><span class="comment">        - 从此以后，num里面就是100</span></span><br><span class="line"><span class="comment">      3 num()</span></span><br><span class="line"><span class="comment">        - 拿到num内的值，当作函数调用</span></span><br><span class="line"><span class="comment">        - 但是num里面已经是数字100而不是函数</span></span><br><span class="line"><span class="comment">        - 报错</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<p>面试题</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = (b = <span class="number">10</span>);</span><br><span class="line">a = <span class="number">20</span>;</span><br><span class="line">b = <span class="number">20</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">//20</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">//20</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = b; <span class="comment">//报错</span></span><br><span class="line"><span class="comment">//拿到b保存的值赋值给a</span></span><br><span class="line"><span class="comment">//访问b</span></span><br><span class="line"><span class="comment">//自己没有 全局也没有</span></span><br><span class="line"><span class="comment">//访问一个全局都不存在的变量 报错</span></span><br><span class="line">a = <span class="number">20</span>;</span><br><span class="line">b = <span class="number">20</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b);</span><br></pre></td></tr></table></figure>

<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><h3 id="认识对象"><a href="#认识对象" class="headerlink" title="认识对象"></a>认识对象</h3><ul>
<li>在数据类型中一种特别的类型：对象类型<ul>
<li>对象类型是一种存储键值对(key-value)的更复杂的数据类型</li>
<li>键值对可以是属性也可以是方法(key 是字符串，value 可以是任意数据类型)</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = &#123;</span><br><span class="line">  <span class="attr">key</span>: value,</span><br><span class="line">  属性名: 属性值,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      两个术语：函数/方法</span></span><br><span class="line"><span class="comment">        函数（function）:在js 代码中通过function默认定义的一个结构，称为函数.</span></span><br><span class="line"><span class="comment">        方法(method):如果把一个函数放到对象中，作为对象的一个属性，那么将这个函数称为方法.</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="title function_">foo</span>();</span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  <span class="comment">//key:value</span></span><br><span class="line">  <span class="comment">//key是字符串，但是在定义对象的属性名的时候，大部份情况下可以省略</span></span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">99</span>,</span><br><span class="line">  <span class="attr">isSingle</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">hobby</span>: [<span class="string">&#x27;唱&#x27;</span>, <span class="string">&#x27;跳&#x27;</span>, <span class="string">&#x27;rap&#x27;</span>],</span><br><span class="line">  <span class="comment">//key比较复杂一点，&quot;&quot;是不能省略的</span></span><br><span class="line">  <span class="string">&#x27;my friend&#x27;</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;tom&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">30</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">eat</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嘎嘎香～&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="创建和使用对象"><a href="#创建和使用对象" class="headerlink" title="创建和使用对象"></a>创建和使用对象</h3><p>有三种</p>
<ol>
<li>对象字面量(Object Literal)</li>
<li>new Object+动态添加属性</li>
<li>new 其他类</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.new Object()</span></span><br><span class="line"><span class="keyword">var</span> obj1 = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">obj1.<span class="property">name</span> = <span class="string">&#x27;tom&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//3.new 其他类</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="keyword">var</span> obj2 = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br></pre></td></tr></table></figure>

<h3 id="对象的常见操作"><a href="#对象的常见操作" class="headerlink" title="对象的常见操作"></a>对象的常见操作</h3><ul>
<li>访问对象的属性 Read</li>
<li>修改对象的属性 Update</li>
<li>添加对象的属性 Create</li>
<li>删除对象的属性 Delete</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.定义一个对象</span></span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="attr">friend</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;chicken&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">30</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">eat</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嘎嘎香&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// console.log(person);</span></span><br><span class="line"><span class="comment">//2.访问对象的属性</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">friend</span>.<span class="property">name</span>);</span><br><span class="line">person.<span class="title function_">eat</span>();</span><br><span class="line"><span class="comment">//3.修改对象中的属性</span></span><br><span class="line"><span class="comment">//一旦你在浏览器的控制台打印整个复杂类型的变量</span></span><br><span class="line"><span class="comment">//你点了展开的小三角，就会显示成这个变量最终的样子</span></span><br><span class="line">person.<span class="property">age</span> = <span class="number">81</span>;</span><br><span class="line"><span class="comment">// console.log(person);</span></span><br><span class="line">person.<span class="property">eat</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;滂臭&#x27;</span>);</span><br><span class="line">&#125;;</span><br><span class="line">person.<span class="title function_">eat</span>();</span><br><span class="line"><span class="comment">//4.添加对象中的属性</span></span><br><span class="line">person.<span class="property">study</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;没日没夜的卷&#x27;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person);</span><br><span class="line"><span class="comment">//5.删除对象中的属性</span></span><br><span class="line"><span class="comment">// delete 操作符</span></span><br><span class="line"><span class="keyword">delete</span> person.<span class="property">study</span>;</span><br><span class="line"><span class="keyword">delete</span> person.<span class="property">age</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person);</span><br></pre></td></tr></table></figure>

<h3 id="数组关联语法"><a href="#数组关联语法" class="headerlink" title="数组关联语法"></a>数组关联语法</h3><p>当对象的 key 是无效的变量标识符时，可以使用这种语法来获取键值<br><strong>不能包含空格、不能以数字开头，不能包含特殊字符</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;jack&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;my friend&#x27;</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">    <span class="attr">sing</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嘉宾～&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&#x27;eat something&#x27;</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;嘎嘎炫～&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//点访问符就不行啦</span></span><br><span class="line"><span class="comment">// console.log(obj.my friend)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj[<span class="string">&#x27;my friend&#x27;</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>, obj[<span class="string">&#x27;name&#x27;</span>]);</span><br><span class="line"><span class="comment">//名字太长 单独拿一个变量装起来</span></span><br><span class="line"><span class="keyword">var</span> eatKey = <span class="string">&#x27;eat something&#x27;</span>;</span><br><span class="line"><span class="comment">// obj[&#x27;eat something&#x27;]();</span></span><br><span class="line"><span class="comment">//千万不要写成 obj.eatKey ，因为这样是访问obj的eatKey属性</span></span><br><span class="line"><span class="comment">// obj.eatKey();</span></span><br><span class="line"><span class="comment">//访问对象不存在的属性</span></span><br><span class="line"><span class="comment">// console.log(obj.age);</span></span><br><span class="line">obj[eatKey]();</span><br></pre></td></tr></table></figure>

<h3 id="对象的遍历-for…in"><a href="#对象的遍历-for…in" class="headerlink" title="对象的遍历(for…in)"></a>对象的遍历(for…in)</h3><ul>
<li>获取对象中所有的属性和方法</li>
<li>Object.keys()</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//我们在开发的时候，可能会要去挨个的拿到里面的每个key以及对应的value</span></span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="attr">height</span>: <span class="number">2.88</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// console.log(`key:$&#123;&#x27;name&#x27;&#125;,value:$&#123;person.name&#125;`);</span></span><br><span class="line"><span class="comment">// console.log(`key:$&#123;&#x27;age&#x27;&#125;,value:$&#123;person.age&#125;`);</span></span><br><span class="line"><span class="comment">//Object.keys(person)返回对象的自己的可枚举属性组成的数组</span></span><br><span class="line"><span class="comment">//Object.definePorperty Proxy</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(person));</span><br><span class="line"><span class="comment">//对对象进行遍历</span></span><br><span class="line"><span class="keyword">var</span> personKeys = <span class="title class_">Object</span>.<span class="title function_">keys</span>(person);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; personKeys.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//personKeys[i]通过索引去拿数组里面的东西</span></span><br><span class="line">  <span class="keyword">var</span> key = personKeys[i];</span><br><span class="line">  <span class="comment">//通过数组关联语法去拿对象的东西</span></span><br><span class="line">  <span class="keyword">var</span> value = person[key];</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`key:<span class="subst">$&#123;key&#125;</span>,value:<span class="subst">$&#123;value&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//2.for...in遍历对象</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> person) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(k);</span><br><span class="line">  <span class="comment">//key是键名</span></span><br><span class="line">  <span class="comment">// console.log(key);</span></span><br><span class="line">  <span class="comment">// console.log(`key:$&#123;key&#125;,value:$&#123;person[key]&#125;`);</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//对象无序    数组有序</span></span><br><span class="line"><span class="comment">//for...of... 默认是不能遍历对象的</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> foo <span class="keyword">of</span> person) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(foo);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="js-的内存分配-important"><a href="#js-的内存分配-important" class="headerlink" title="js 的内存分配(!important)"></a>js 的内存分配(!important)</h3><ul>
<li><p>程序是需要加载到内存中来执行的，内存就可以划分为两个区域:栈内存，堆内存</p>
<ul>
<li><strong>原始类型</strong>占据的空间是在<strong>栈内存</strong>中分配的</li>
<li><strong>对象类型</strong>占据的空间是在<strong>堆内存</strong>中分配的</li>
</ul>
</li>
<li><p>原始类型的保存方式:保存的是值本身</p>
</li>
<li><p>对象类型的保存方式:保存的是对象的”引用”</p>
</li>
</ul>
<blockquote>
<p>函数本身是放到堆内存的，但是函数的执行是放到栈里面的。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">&#x27;jack&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">foo</span>: <span class="string">&#x27;foo&#x27;</span>,</span><br><span class="line">  <span class="attr">bar</span>: <span class="number">123</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> message = <span class="string">&#x27;hello&#x27;</span> + name;</span><br><span class="line"><span class="keyword">var</span> info = obj;</span><br><span class="line">info.<span class="property">bar</span> = <span class="number">456</span>;</span><br><span class="line"><span class="comment">//我们想要修改的是info的bar属性</span></span><br><span class="line"><span class="comment">//结果发现obj的bar也变了</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br></pre></td></tr></table></figure>

<h4 id="思考如下现象"><a href="#思考如下现象" class="headerlink" title="思考如下现象"></a>思考如下现象</h4><ol>
<li>两个对象的比较</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num1 = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">123</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num1 === num2); <span class="comment">//true</span></span><br><span class="line"><span class="comment">//两个对象的比较</span></span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;&#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj1 === obj2); <span class="comment">//false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj1 == obj2); <span class="comment">//false</span></span><br><span class="line"><span class="comment">//从内存的角度去解释</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>引用传递的内存表现</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//2.引用的赋值</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;jack&#x27;</span>,</span><br><span class="line">  <span class="attr">friend</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> friend = info.<span class="property">friend</span>; <span class="comment">//&#123;name:&#x27;alex&#x27;&#125;</span></span><br><span class="line">friend.<span class="property">name</span> = <span class="string">&#x27;dog&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">friend</span>.<span class="property">name</span>); <span class="comment">//</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>值传递</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//3.值传递</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  a = <span class="number">200</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="title function_">foo</span>(num);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num); <span class="comment">//100</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// function sum(a, b) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(a + b);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// sum(10, 20);</span></span><br><span class="line"><span class="comment">// sum(100, 200);</span></span><br></pre></td></tr></table></figure>

<ol start="4">
<li>引用传递</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//4.引用传递,在函数中创建了一个新对象，没有对传入的对象进行修改</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  a = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;jack&#x27;</span>,</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">//&#x27;jack&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj); <span class="comment">//&#x27;alex&#x27;</span></span><br></pre></td></tr></table></figure>

<ol start="5">
<li>引用传递</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//5. 引用传递,但是对传入的对象进行了修改</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  a.<span class="property">name</span> = <span class="string">&#x27;dog&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="title function_">foo</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj); <span class="comment">//dog</span></span><br></pre></td></tr></table></figure>

<h3 id="this"><a href="#this" class="headerlink" title="this"></a>this</h3><p>目前掌握两个 this 的判断方法:</p>
<ul>
<li>默认的方式调用，this 指向 window</li>
<li>通过对象调用，this 指向对象</li>
</ul>
<blockquote>
<p>this 不看函数定义，只看函数调用</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//情况一:如果普通的函数被默认调用，this-&gt;window</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">  <span class="comment">// console.log(arguments);</span></span><br><span class="line">  <span class="comment">// console.log(this);</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>(<span class="string">&#x27;alex&#x27;</span>, <span class="number">18</span>); <span class="comment">//window</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayHello</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// console.log(this);</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">sayHello</span>(); <span class="comment">//window</span></span><br><span class="line"><span class="comment">//情况二:如果函数被某一个对象引用，并且调用它，this-&gt;对象</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  <span class="attr">friend</span>: &#123;</span><br><span class="line">    <span class="attr">running</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">running</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">    <span class="comment">// console.log(this == obj);</span></span><br><span class="line">    <span class="comment">// console.log(this === obj);//true</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// obj.friend.running(); //friend</span></span><br><span class="line"><span class="comment">// obj[&#x27;friend&#x27;][&#x27;running&#x27;]()</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//题目一</span></span><br><span class="line"><span class="keyword">var</span> fn = obj.<span class="property">running</span>;</span><br><span class="line"><span class="title function_">fn</span>(); <span class="comment">//window</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//题目二</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">bar</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;jack&#x27;</span>,</span><br><span class="line">  <span class="attr">bar</span>: bar,</span><br><span class="line">&#125;;</span><br><span class="line">obj.<span class="title function_">bar</span>(); <span class="comment">//obj</span></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">//window</span></span><br></pre></td></tr></table></figure>

<h4 id="this-的作用"><a href="#this-的作用" class="headerlink" title="this 的作用"></a>this 的作用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//需要有一个类，类中的方法，实例的方法中，this指向当前的调用对象 new 类()-&gt;对象 this</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="comment">//1.传递参数</span></span><br><span class="line">  <span class="attr">running</span>: <span class="keyword">function</span> (<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(name, <span class="string">&#x27;在疯狂的跑&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//2.不传递参数，直接写一个info.name</span></span><br><span class="line">  <span class="attr">eating</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(info.<span class="property">name</span>, <span class="string">&#x27;在疯狂的吃&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//3.对象中的函数中的this永远指向该对象</span></span><br><span class="line">  <span class="attr">jumpping</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>, <span class="string">&#x27;疯狂的跳&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="类和对象的思维方式-（如何创建一系列的对象）"><a href="#类和对象的思维方式-（如何创建一系列的对象）" class="headerlink" title="类和对象的思维方式 （如何创建一系列的对象）"></a>类和对象的思维方式 （如何创建一系列的对象）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建一系列对象的方法一:</span></span><br><span class="line"><span class="comment">//手动书写很多对象... ❌</span></span><br><span class="line"><span class="keyword">var</span> p1 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="attr">height</span>: <span class="number">0.5</span>,</span><br><span class="line">  <span class="attr">address</span>: <span class="string">&#x27;北京&#x27;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//创建一系列对象的方法二:工厂函数</span></span><br><span class="line"><span class="comment">//for可以创建多个对象，但是这些对象都是tom，不够灵活</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">2</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">var</span> stu = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;tom&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//工厂函数(工厂生产stu对象)-&gt;设计模式</span></span><br><span class="line"><span class="comment">// function createStudent(name, age) &#123;</span></span><br><span class="line"><span class="comment">//   //虽然我只写了一个stu = &#123;&#125;但是每次调用这个函数</span></span><br><span class="line"><span class="comment">//   //都会开辟一块新的内存空间</span></span><br><span class="line"><span class="comment">//   var stu = &#123;&#125;;</span></span><br><span class="line"><span class="comment">//   stu.name = name;</span></span><br><span class="line"><span class="comment">//   stu.age = age;</span></span><br><span class="line"><span class="comment">//   return stu;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// var stu1 = createStudent(&#x27;张三&#x27;, 18);</span></span><br><span class="line"><span class="comment">// var stu2 = createStudent(&#x27;李四&#x27;, 28);</span></span><br><span class="line"><span class="comment">// var stu3 = createStudent(&#x27;王五&#x27;, 12);</span></span><br><span class="line"><span class="comment">//方式三:构造函数创建对象</span></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      js默认提供给我们的，更加符合js思维方式，</span></span><br><span class="line"><span class="comment">      在函数中this一般指向某个对象</span></span><br><span class="line"><span class="comment">      new做了那四件事？</span></span><br><span class="line"><span class="comment">        如果一个函数被new操作符 调用</span></span><br><span class="line"><span class="comment">          1. 创建出一个新的空的对象</span></span><br><span class="line"><span class="comment">          2. 让this指向这个新的空对象</span></span><br><span class="line"><span class="comment">          3. 执行函数体</span></span><br><span class="line"><span class="comment">          4. 返回该对象</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">coder</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">  <span class="comment">// return &#123;&#125;;</span></span><br><span class="line">  <span class="comment">//return是原始数据类型 没用</span></span><br><span class="line">  <span class="comment">//return 是Object类型 返回值就变成你return的数据</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//new是keyword 也是operator</span></span><br><span class="line"><span class="keyword">var</span> stu1 = <span class="keyword">new</span> <span class="title function_">coder</span>(<span class="string">&#x27;张三&#x27;</span>, <span class="number">123</span>); <span class="comment">//this-&gt;张三</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(stu1);</span><br><span class="line"><span class="keyword">var</span> stu2 = <span class="keyword">new</span> <span class="title function_">coder</span>(<span class="string">&#x27;李四&#x27;</span>, <span class="number">19</span>); <span class="comment">//this-&gt;李四</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(stu2);</span><br><span class="line"></span><br><span class="line"><span class="comment">//补充</span></span><br><span class="line"><span class="comment">//构造函数的名称：使用大驼峰</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Coder</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="comment">//平时创建普通对象</span></span><br><span class="line"><span class="keyword">var</span> person = &#123;&#125;;</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//普通函数:使用小驼峰</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayHello</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      eat   gaga</span></span><br><span class="line"><span class="comment">      大驼峰:EatGaga</span></span><br><span class="line"><span class="comment">      小驼峰:eatGaga</span></span><br><span class="line"><span class="comment">      */</span></span><br></pre></td></tr></table></figure>

<h3 id="类和对象的关系"><a href="#类和对象的关系" class="headerlink" title="类和对象的关系"></a>类和对象的关系</h3><ul>
<li>什么是类(构造函数)？<ul>
<li>现实生活中往往是根据 <strong>一份描述&#x2F;一个模版</strong> 来创建一个<strong>实体对象</strong>的</li>
<li>编程语言也一样，也必须先有这样一份描述，说明将来创建出来的对象会有哪些属性和方法</li>
</ul>
</li>
<li>在 js 中类的表现形式就是构造函数<ul>
<li>构造函数也是函数</li>
<li>如果一个普通的函数被 new 操作符调用了，我们就称他为构造函数</li>
</ul>
</li>
<li>如果一个函数使用 new 操作符调用，那么他会执行如下步骤<ul>
<li>在内存中创建一个新的空对象</li>
<li>这个对象内部的<code>[[Prototype]]</code>属性会被赋值为该构造函数的 prototype 属性</li>
<li>构造函数内部的 this,会指向这个创建出来的新对象</li>
<li>执行函数的内部代码</li>
<li>如果构造函数没有返回非空对象，则返回创建出来的新对象</li>
</ul>
</li>
</ul>
<h3 id="额外补充-全局对象-window"><a href="#额外补充-全局对象-window" class="headerlink" title="额外补充-全局对象 window"></a>额外补充-全局对象 window</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//浏览器存在的一个全局对象 window</span></span><br><span class="line"><span class="comment">//作用一:查找变量时，最终会找到window上</span></span><br><span class="line"><span class="comment">//作用二:将一些浏览器提供给我们的变量/函数/对象，放在window上</span></span><br><span class="line"><span class="comment">//作用三(了解):使用var定义的变量会默认添加到window上，为什么我们后面不用var而是let/const es6-&gt;es5</span></span><br><span class="line"><span class="comment">// console.log(msg); //因为没有 报错</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>); <span class="comment">//不会报错</span></span><br><span class="line"><span class="keyword">var</span> aname = <span class="string">&#x27;123&#x27;</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(alert === <span class="variable language_">window</span>.<span class="property">alert</span>);</span><br><span class="line">  <span class="comment">//Object</span></span><br><span class="line">  <span class="comment">//new Object()</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span> === <span class="variable language_">window</span>.<span class="property">Object</span>);</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">document</span>);</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">console</span> === <span class="variable language_">window</span>.<span class="property">console</span>);</span><br><span class="line">  <span class="keyword">var</span> obj = <span class="string">&#x27;123&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure>

<h3 id="额外补充-函数也是对象"><a href="#额外补充-函数也是对象" class="headerlink" title="额外补充-函数也是对象"></a>额外补充-函数也是对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义原始类型的变量</span></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="comment">//定义对象类型的变量</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;; <span class="comment">//堆内存 本质上new Object()在堆里面开辟空间给他</span></span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;; <span class="comment">//堆内存 函数本身是放在堆内存的 具体调用我们先不管</span></span><br><span class="line"><span class="keyword">var</span> foo1 = <span class="keyword">new</span> <span class="title class_">Function</span>(); <span class="comment">//能这样创建说明函数也是对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> obj); <span class="comment">//object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> foo); <span class="comment">//function -&gt; object  更具体</span></span><br><span class="line"><span class="comment">//Object 是Function的父类</span></span><br><span class="line"><span class="comment">//动物类 狗类</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//函数是一个对象</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;&#125;;</span><br><span class="line">info.<span class="property">name</span> = <span class="string">&#x27;abc&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayHello</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="comment">//函数是对象，也可以往对象里面添加属性</span></span><br><span class="line">sayHello.<span class="property">age</span> = <span class="number">18</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sayHello.<span class="property">age</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//有什么用？</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Dog</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="comment">//构造函数(类) 方法 称为 类方法</span></span><br><span class="line"><span class="comment">//暂时做个了解</span></span><br><span class="line"><span class="title class_">Dog</span>.<span class="property">running</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;跑～&#x27;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="title class_">Dog</span>.<span class="title function_">running</span>();</span><br></pre></td></tr></table></figure>

<h2 id="数组-Array"><a href="#数组-Array" class="headerlink" title="数组 Array"></a>数组 Array</h2><h3 id="1-认识数组"><a href="#1-认识数组" class="headerlink" title="1.认识数组"></a>1.认识数组</h3><ul>
<li>是 js 的一个复杂数据类型，叫 Array</li>
<li>有序的存放多个数据的一种数据结构</li>
</ul>
<h3 id="2-创建数组"><a href="#2-创建数组" class="headerlink" title="2.创建数组"></a>2.创建数组</h3><h4 id="2-1-字面量创建"><a href="#2-1-字面量创建" class="headerlink" title="2.1 字面量创建"></a>2.1 字面量创建</h4><p>空数组:var arr &#x3D;[]<br>带有数据的:var arr &#x3D; [数据 1,数据 2,…]</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;alex&#x27;</span>, <span class="string">&#x27;jack&#x27;</span>, <span class="string">&#x27;lyan&#x27;</span>, <span class="string">&#x27;tom&#x27;</span>, <span class="string">&#x27;kern&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> product1 = &#123; <span class="attr">name</span>: <span class="string">&#x27;苹果&#x27;</span>, <span class="attr">price</span>: <span class="number">10</span> &#125;;</span><br><span class="line"><span class="keyword">var</span> products = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;西瓜&#x27;</span>, <span class="attr">price</span>: <span class="number">20</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;键盘&#x27;</span>, <span class="attr">price</span>: <span class="number">300</span> &#125;,</span><br><span class="line">  product1, <span class="comment">//开发不推荐这样</span></span><br><span class="line">  <span class="comment">//studentName student-name StudentName</span></span><br><span class="line">];</span><br></pre></td></tr></table></figure>

<h4 id="2-2-构造函数-Array-创建"><a href="#2-2-构造函数-Array-创建" class="headerlink" title="2.2 构造函数(Array)创建"></a>2.2 构造函数(Array)创建</h4><p>语法 var arr &#x3D; new Array(参数)<br>参数个数为 1:数组的长度，empty 填充<br>参数个数&gt;1:数组的数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="title class_">Array</span>(); <span class="comment">// []</span></span><br><span class="line"><span class="keyword">var</span> arr2 = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>, <span class="string">&#x27;nba&#x27;</span>); <span class="comment">//[&#x27;abc&#x27;,&#x27;cba&#x27;,&#x27;nba&#x27;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//传入一个数字,它会默认当成我们想要创建一个对应长度的数组</span></span><br><span class="line"><span class="keyword">var</span> arr3 = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">5</span>); <span class="comment">//[empty*5]</span></span><br></pre></td></tr></table></figure>

<h4 id="2-3-索引的问题"><a href="#2-3-索引的问题" class="headerlink" title="2.3 索引的问题"></a>2.3 索引的问题</h4><p>数组元素索引(index)从 0 开始<br>js 不支持负索引</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;alex&#x27;</span>, <span class="string">&#x27;jack&#x27;</span>, <span class="string">&#x27;lyan&#x27;</span>, <span class="string">&#x27;tom&#x27;</span>, <span class="string">&#x27;kern&#x27;</span>];</span><br><span class="line"><span class="comment">//想访问最后一个元素 js不能写names[-1]</span></span><br><span class="line">names[names.<span class="property">length</span> - <span class="number">1</span>];</span><br></pre></td></tr></table></figure>

<h3 id="3-数组的基本操作"><a href="#3-数组的基本操作" class="headerlink" title="3 数组的基本操作"></a>3 数组的基本操作</h3><h4 id="3-1-访问数组中的元素"><a href="#3-1-访问数组中的元素" class="headerlink" title="3.1 访问数组中的元素"></a>3.1 访问数组中的元素</h4><ul>
<li>通过中括号[]来访问</li>
<li>arr.at(i)<br>i&gt;&#x3D;0 的时候和[]没有区别<br>i&lt;0,它是从数组的尾部向前数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>, <span class="string">&#x27;nba&#x27;</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(names[<span class="number">1</span>]); <span class="comment">//&#x27;cba&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(names.<span class="title function_">at</span>(<span class="number">1</span>)); <span class="comment">//&#x27;cba&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(names[-<span class="number">1</span>]); <span class="comment">//undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(names.<span class="title function_">at</span>(-<span class="number">1</span>)); <span class="comment">//&#x27;nba&#x27;</span></span><br><span class="line"><span class="comment">//实际开发很少用这种负数，阅读性太差</span></span><br></pre></td></tr></table></figure>

<h4 id="3-2-修改数组中的元素"><a href="#3-2-修改数组中的元素" class="headerlink" title="3.2 修改数组中的元素"></a>3.2 修改数组中的元素</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>, <span class="string">&#x27;nba&#x27;</span>];</span><br><span class="line">names[<span class="number">0</span>] = <span class="string">&#x27;jack&#x27;</span>;</span><br></pre></td></tr></table></figure>

<h4 id="3-3-增加数组中的元素-x2F-删除数组中的元素-了解"><a href="#3-3-增加数组中的元素-x2F-删除数组中的元素-了解" class="headerlink" title="3.3 增加数组中的元素&#x2F;删除数组中的元素(了解)"></a>3.3 增加数组中的元素&#x2F;删除数组中的元素(了解)</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>, <span class="string">&#x27;nba&#x27;</span>];</span><br><span class="line"><span class="comment">//             0       1     2</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;改动前&#x27;</span>, names);</span><br><span class="line"><span class="comment">// names[3] = &#x27;jack&#x27;;</span></span><br><span class="line"><span class="keyword">delete</span> names[<span class="number">0</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;改动后&#x27;</span>, names);</span><br></pre></td></tr></table></figure>

<h3 id="4-数组的添加、删除方法-一"><a href="#4-数组的添加、删除方法-一" class="headerlink" title="4.数组的添加、删除方法(一)"></a>4.数组的添加、删除方法(一)</h3><h4 id="push-pop-shift-unshift"><a href="#push-pop-shift-unshift" class="headerlink" title="push-pop shift-unshift"></a>push-pop shift-unshift</h4><ul>
<li>在数组的尾端添加或者删除元素<br>push 添加<br>pop 删除</li>
<li>在数组的首端添加或删除元素<br>shift 删除<br>unshift 添加</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>, <span class="string">&#x27;nba&#x27;</span>, <span class="string">&#x27;mba&#x27;</span>, <span class="string">&#x27;abcd&#x27;</span>];</span><br><span class="line"><span class="comment">//1.在尾部添加和删除元素</span></span><br><span class="line"><span class="comment">// names.push(&#x27;jack&#x27;, &#x27;alex&#x27;, &#x27;tom&#x27;);</span></span><br><span class="line"><span class="comment">//没有参数，而且一次只能删除一个</span></span><br><span class="line"><span class="comment">//如果需要拿到被删除的可以拿到，不需要的话 不管他</span></span><br><span class="line"><span class="comment">// var a = names.pop();</span></span><br><span class="line"><span class="comment">// console.log(a);</span></span><br><span class="line"><span class="comment">//2.头部</span></span><br><span class="line"><span class="comment">//一次添加多个</span></span><br><span class="line">names.<span class="title function_">unshift</span>(<span class="string">&#x27;jack&#x27;</span>, <span class="string">&#x27;alex&#x27;</span>);</span><br><span class="line"><span class="comment">//一次只能删除一个</span></span><br><span class="line">names.<span class="title function_">shift</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(names);</span><br></pre></td></tr></table></figure>

<h3 id="5-数组的添加、删除方法-二"><a href="#5-数组的添加、删除方法-二" class="headerlink" title="5.数组的添加、删除方法(二)"></a>5.数组的添加、删除方法(二)</h3><p>splice 可以添加，删除，替换元素<br>语法<br><code>array.splice(start[,deleteCount[,item1[,item2[,...]]]])</code></p>
<blockquote>
<p>中括号不是数组的意思，可选的意思</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// var names = [&#x27;abc&#x27;, &#x27;cba&#x27;, &#x27;nba&#x27;, &#x27;15-5&#x27;];</span></span><br><span class="line"><span class="comment">//参数一:start，从什么位置开始操作元素</span></span><br><span class="line"><span class="comment">//参数二:deleteCount，删除的元素个数</span></span><br><span class="line"><span class="comment">// //1.删除</span></span><br><span class="line"><span class="comment">// names.splice(1, 2);</span></span><br><span class="line"><span class="comment">// //splice方法会直接改变原数组</span></span><br><span class="line"><span class="comment">// console.log(names);</span></span><br><span class="line"><span class="comment">//2.新增</span></span><br><span class="line"><span class="comment">//deleteCount:0,后面可以再跟上其他你要添加的元素</span></span><br><span class="line"><span class="comment">// var names = [&#x27;abc&#x27;, &#x27;cba&#x27;, &#x27;nba&#x27;, &#x27;15-5&#x27;];</span></span><br><span class="line"><span class="comment">// names.splice(1, 0, &#x27;麦当劳&#x27;, &#x27;KFC&#x27;, &#x27;汉堡王&#x27;);</span></span><br><span class="line"><span class="comment">// console.log(names);</span></span><br><span class="line"><span class="comment">//3.替换元素</span></span><br><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>, <span class="string">&#x27;nba&#x27;</span>, <span class="string">&#x27;15-5&#x27;</span>];</span><br><span class="line">names.<span class="title function_">splice</span>(<span class="number">1</span>, <span class="number">1</span>, <span class="string">&#x27;alex&#x27;</span>, <span class="string">&#x27;jack&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(names);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>一般情况下头部和尾部的操作我们还是用那两对，只是在处理中间的情况下更多的用到 splice</p>
</blockquote>
<h3 id="6-length-属性"><a href="#6-length-属性" class="headerlink" title="6.length 属性"></a>6.length 属性</h3><ul>
<li>length 属性用于获取数组的长度<br>当我们修改数组的时候，他的长度会自动更新</li>
<li>length 属性另一个特点是可写的<br>如果我们修改为一个大于原来的值，会用 empty 填充<br>如果小于，数组被截断</li>
<li>清空数组最快办法:<code>arr.length =0</code></li>
</ul>
<h3 id="7-数组的遍历"><a href="#7-数组的遍历" class="headerlink" title="7 数组的遍历"></a>7 数组的遍历</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> dogs = [<span class="string">&#x27;二哈&#x27;</span>, <span class="string">&#x27;边牧&#x27;</span>, <span class="string">&#x27;柯基&#x27;</span>];</span><br><span class="line"><span class="comment">//1. 普通的for遍历</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; dogs.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//i索引</span></span><br><span class="line">  <span class="comment">//dogs[i]元素</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(dogs[i]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//2. for...in遍历</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> index <span class="keyword">in</span> dogs) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(dogs[index]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//3. for...of遍历</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> item <span class="keyword">of</span> dogs) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="8-数组方法"><a href="#8-数组方法" class="headerlink" title="8 数组方法"></a>8 数组方法</h3><h4 id="8-1-slice"><a href="#8-1-slice" class="headerlink" title="8.1 slice"></a>8.1 slice</h4><ul>
<li>arr.slice 用于对数组进行截取(和字符串的类似)<br><code>arr.slice(begin[,end])</code><br>包含 begin 元素但是不包含 end</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> dogs = [<span class="string">&#x27;二哈&#x27;</span>, <span class="string">&#x27;边牧&#x27;</span>, <span class="string">&#x27;柯基&#x27;</span>, <span class="string">&#x27;alex&#x27;</span>, <span class="string">&#x27;jack&#x27;</span>, <span class="string">&#x27;tom&#x27;</span>];</span><br><span class="line"><span class="comment">//slice方法，不回修改原数组</span></span><br><span class="line"><span class="comment">//splice会修改原有的数组</span></span><br><span class="line"><span class="comment">//start从什么地方开始</span></span><br><span class="line"><span class="comment">//end结束为止</span></span><br><span class="line"><span class="keyword">var</span> res = dogs.<span class="title function_">slice</span>(<span class="number">2</span>, <span class="number">4</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(dogs);</span><br><span class="line"><span class="comment">//不传任何参数，把原数组复制一份给我们</span></span><br><span class="line"><span class="keyword">var</span> res1 = dogs.<span class="title function_">slice</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res1);</span><br><span class="line"><span class="comment">//填负数</span></span><br><span class="line"><span class="keyword">var</span> res2 = dogs.<span class="title function_">slice</span>(<span class="number">1</span>, -<span class="number">2</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res2); <span class="comment">// [&#x27;边牧&#x27;, &#x27;柯基&#x27;, &#x27;alex&#x27;]</span></span><br><span class="line"><span class="comment">//故意找茬</span></span><br><span class="line"><span class="keyword">var</span> res3 = dogs.<span class="title function_">slice</span>(<span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res3); <span class="comment">// []</span></span><br></pre></td></tr></table></figure>

<h4 id="8-2-concat"><a href="#8-2-concat" class="headerlink" title="8.2 concat"></a>8.2 concat</h4><p>创建一个新的数组，其中包含其他数组&#x2F;其他项的值<br>进行数组的拼接<br><code>arr.concat(value1[,value2[...[,valueN]]])</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;hello&#x27;</span>, <span class="string">&#x27;world&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">concat</span>(<span class="string">&#x27;新来的&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> res1 = arr.<span class="title function_">concat</span>(<span class="string">&#x27;又一个新来的&#x27;</span>, [<span class="number">100</span>, <span class="number">200</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res, res1);</span><br><span class="line"><span class="keyword">var</span> name1 = [<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> name2 = [<span class="string">&#x27;alex&#x27;</span>, <span class="string">&#x27;tom&#x27;</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name1.<span class="title function_">concat</span>(name2));</span><br></pre></td></tr></table></figure>

<h4 id="8-3-join"><a href="#8-3-join" class="headerlink" title="8.3 join"></a>8.3 join</h4><p>把数组的所有元素连接成一个字符串并返回这个字符串<br><code>arr.join([连接符])</code></p>
<p>功能相反的一个字符串方法<code>str.split([连接符])</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>, <span class="number">40</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;原始数组&#x27;</span>, arr);</span><br><span class="line"><span class="comment">//不传任何连接符，默认使用逗号</span></span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">join</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"><span class="keyword">var</span> res1 = arr.<span class="title function_">join</span>(<span class="string">&#x27;-&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res1);</span><br><span class="line"><span class="keyword">var</span> res2 = arr.<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res2); <span class="comment">//10203040</span></span><br><span class="line"><span class="keyword">var</span> res3 = arr.<span class="title function_">join</span>(<span class="string">&#x27;^.^&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res3);</span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;get-element-by-id&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">split</span>(<span class="string">&#x27;-&#x27;</span>)); <span class="comment">//[&#x27;get&#x27;, &#x27;element&#x27;, &#x27;by&#x27;, &#x27;id&#x27;]</span></span><br></pre></td></tr></table></figure>

<h3 id="9-数组方法-查找元素"><a href="#9-数组方法-查找元素" class="headerlink" title="9 数组方法-查找元素"></a>9 数组方法-查找元素</h3><h4 id="9-1-indexOf"><a href="#9-1-indexOf" class="headerlink" title="9.1 indexOf"></a>9.1 indexOf</h4><p><code>arr.indexOf(searchElment[,fromIndex])</code><br>从 fromIndex 开始查找，如果找到返回索引，没有找到返回-1，也有对应的 lastIndexOf 方法</p>
<h4 id="9-2-includes"><a href="#9-2-includes" class="headerlink" title="9.2 includes"></a>9.2 includes</h4><p>从 fromIndex 开始搜索 searchElment，如果找到了返回 true，找不到的话返回 false<br><code>arr.includes(searchElment[,fromIndex])</code></p>
<h4 id="9-3-find-和-findIndex"><a href="#9-3-find-和-findIndex" class="headerlink" title="9.3 find 和 findIndex"></a>9.3 find 和 findIndex</h4><p>都是 es6 新增的</p>
<p>9.3-1 findIndex</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;cba&#x27;</span>, <span class="string">&#x27;nnd&#x27;</span>];</span><br><span class="line"><span class="comment">//item是元素 index索引 arr当前数组</span></span><br><span class="line"><span class="keyword">var</span> res = names.<span class="title function_">findIndex</span>(<span class="keyword">function</span> (<span class="params">item, index, arr</span>) &#123;</span><br><span class="line">  <span class="comment">// console.log(item, index, arr);</span></span><br><span class="line">  <span class="keyword">return</span> item === <span class="string">&#x27;nnd&#x27;</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res); <span class="comment">//2 &#x27;nnd&#x27;的索引</span></span><br></pre></td></tr></table></figure>

<p>9.3-2 find<br><code>arr.find(function(item,index,arr)&#123;&#125;)</code></p>
<ul>
<li>返回值:你找到的数据</li>
<li>查找条件以 return 的形式来书写</li>
<li>往往用在复杂数据类型中查找</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> students = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">100</span>, <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">101</span>, <span class="attr">name</span>: <span class="string">&#x27;jack&#x27;</span>, <span class="attr">age</span>: <span class="number">38</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">102</span>, <span class="attr">name</span>: <span class="string">&#x27;tom&#x27;</span>, <span class="attr">age</span>: <span class="number">8</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">103</span>, <span class="attr">name</span>: <span class="string">&#x27;kern&#x27;</span>, <span class="attr">age</span>: <span class="number">88</span> &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="comment">//查找id为101的学生的所有信息</span></span><br><span class="line"><span class="keyword">var</span> stu = <span class="literal">null</span>;</span><br><span class="line"><span class="comment">//自己用for循环配合if寻找</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; students.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">// students[i]</span></span><br><span class="line">  <span class="keyword">if</span> (students[i].<span class="property">id</span> === <span class="number">101</span>) &#123;</span><br><span class="line">    stu = students[i];</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(stu);</span><br><span class="line"><span class="comment">// if (stu) &#123;</span></span><br><span class="line"><span class="comment">//   console.log(&#x27;展示stu&#x27;);</span></span><br><span class="line"><span class="comment">// &#125; else &#123;</span></span><br><span class="line"><span class="comment">//   console.log(&#x27;查无此人&#x27;);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="keyword">var</span> stu2 = students.<span class="title function_">find</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (item.<span class="property">id</span> === <span class="number">101</span>) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(stu2);</span><br><span class="line"><span class="comment">// //简单的</span></span><br><span class="line"><span class="comment">// var arr = [100, 200, 301, 400, 500];</span></span><br><span class="line"><span class="comment">// //我要查找arr中的奇数</span></span><br><span class="line"><span class="comment">// var res = arr.find(function (item) &#123;</span></span><br><span class="line"><span class="comment">//   //以return的形式书写条件</span></span><br><span class="line"><span class="comment">//   return item % 2 === 1;</span></span><br><span class="line"><span class="comment">// &#125;);</span></span><br><span class="line"><span class="comment">// console.log(res);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//往往会用在复杂类型中查找</span></span><br><span class="line"><span class="keyword">var</span> objArr = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;迪丽热巴&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;刘亦菲&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">19</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">id</span>: <span class="number">3</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">29</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="comment">//要求接受用户输入的id，根据id查找🐟的所有信息</span></span><br><span class="line"><span class="keyword">var</span> inputId = <span class="title class_">Number</span>(<span class="title function_">prompt</span>(<span class="string">&#x27;请输入你要查询的🐟的id&#x27;</span>));</span><br><span class="line"><span class="keyword">var</span> fish = objArr.<span class="title function_">find</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="comment">//条件</span></span><br><span class="line">  <span class="keyword">return</span> item.<span class="property">id</span> === inputId;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="title function_">alert</span>(fish); <span class="comment">//他只能识别字符串，当你想把一个对象强行识别为字符串 就会遇到[object Object]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你的🐟的完整信息:&#x27;</span>, fish);</span><br></pre></td></tr></table></figure>

<h3 id="10-数组的排序-sort-x2F-reverse"><a href="#10-数组的排序-sort-x2F-reverse" class="headerlink" title="10 数组的排序- sort&#x2F;reverse"></a>10 数组的排序- sort&#x2F;reverse</h3><h4 id="10-1-sort"><a href="#10-1-sort" class="headerlink" title="10.1 sort"></a>10.1 sort</h4><p>按照你制定的规则来排序<br>参数:两个</p>
<ul>
<li>arr.sort() 把数据一位一位的看待</li>
<li>arr.sort(a-b) 从小到大排</li>
<li>arr.sort(b-a) 从大到小</li>
</ul>
<p>返回值:排序后的数组</p>
<p><code>arr.sort[compareFunction]</code><br>如果 compareFunction（a，b）&lt;0 那么 a 会排到 b 的前面<br>如果 compareFunction（a，b）&#x3D;0 那么 a b 的相对位置保持不变</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">100</span>, <span class="number">10</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">2</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;原始的数组&#x27;</span>, arr);</span><br><span class="line"><span class="comment">//不写参数 把每个数据 一位一位的看待</span></span><br><span class="line"><span class="comment">// var res = arr.sort();</span></span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">sort</span>(<span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="comment">/* </span></span><br><span class="line"><span class="comment">a=3     b=1   -2&lt;0    3,1</span></span><br><span class="line"><span class="comment">a = 100 b=3     &lt;0  100,3,1</span></span><br><span class="line"><span class="comment">a=10   b=100    &gt;0  100,10,3,1</span></span><br><span class="line"><span class="comment">a=5  b=10       &gt;0  100,10,5,3,1</span></span><br><span class="line"><span class="comment">a=4  b=5        &gt;0  100,10,5,4,3,1</span></span><br><span class="line"><span class="comment">a=2  b=4        &gt;0  100,10,5,4,2,3,1</span></span><br><span class="line"><span class="comment">a=3  b=2        &lt;0  100,10,5,4,3,2,1</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//a是下一位数，b是上一位数</span></span><br><span class="line">  <span class="comment">// console.group();</span></span><br><span class="line">  <span class="comment">// console.log(&#x27;a&#x27;, a);</span></span><br><span class="line">  <span class="comment">// console.log(&#x27;b&#x27;, b);</span></span><br><span class="line">  <span class="comment">// console.groupEnd();</span></span><br><span class="line">  <span class="comment">//从小到大排</span></span><br><span class="line">  <span class="comment">// return a - b;</span></span><br><span class="line">  <span class="keyword">return</span> b - a; <span class="comment">// [100, 10, 5, 4, 3, 2, 1]</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;调用方法之后的数组&#x27;</span>, arr);</span><br><span class="line"></span><br><span class="line"><span class="comment">//复杂类型排序</span></span><br><span class="line"><span class="keyword">var</span> good = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">100</span>, <span class="attr">name</span>: <span class="string">&#x27;麦当劳&#x27;</span>, <span class="attr">price</span>: <span class="number">25</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">101</span>, <span class="attr">name</span>: <span class="string">&#x27;KFC&#x27;</span>, <span class="attr">price</span>: <span class="number">99</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">102</span>, <span class="attr">name</span>: <span class="string">&#x27;华莱士&#x27;</span>, <span class="attr">price</span>: <span class="number">10</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">103</span>, <span class="attr">name</span>: <span class="string">&#x27;奈雪的茶&#x27;</span>, <span class="attr">price</span>: <span class="number">28</span> &#125;,</span><br><span class="line">];</span><br><span class="line">good.<span class="title function_">sort</span>(<span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="comment">//a.price  b.price</span></span><br><span class="line">  <span class="keyword">return</span> a.<span class="property">price</span> - b.<span class="property">price</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="10-2-reverse"><a href="#10-2-reverse" class="headerlink" title="10.2 reverse"></a>10.2 reverse</h4><p>颠倒数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> nums = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line">nums.<span class="title function_">reverse</span>(); <span class="comment">//[4,3,2,1]</span></span><br></pre></td></tr></table></figure>

<p>返回值：颠倒之后的数组</p>
<h3 id="11-数组的其他高阶方法"><a href="#11-数组的其他高阶方法" class="headerlink" title="11 数组的其他高阶方法"></a>11 数组的其他高阶方法</h3><h4 id="11-1-forEach"><a href="#11-1-forEach" class="headerlink" title="11.1 forEach"></a>11.1 forEach</h4><p>遍历数组，并且让数组中的每一个元素都执行一次对应的方法<br>语法:arr.forEach(function(item,index,arr){})</p>
<ul>
<li>item 数组内的每一项</li>
<li>index 每一项的索引</li>
<li>arr 被遍历的数组</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">35</span>, <span class="number">66</span>, <span class="number">10</span>, <span class="number">6</span>];</span><br><span class="line"><span class="comment">//讲过三种数组的遍历 ，新增的一种遍历方式</span></span><br><span class="line"><span class="comment">//a以后都没有必要去写，只是为了记笔记方便</span></span><br><span class="line"><span class="comment">//a函数我们定义 但是不由我们调用 -- 回调函数</span></span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">forEach</span>(<span class="keyword">function</span> <span class="title function_">a</span>(<span class="params">item, index, arr</span>) &#123;</span><br><span class="line">  <span class="comment">/* </span></span><br><span class="line"><span class="comment">        forEach的原理 </span></span><br><span class="line"><span class="comment">          根据数组成员的数量来调用a函数</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(item, index, arr);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line">arr1.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  sum += item;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sum); <span class="comment">//10</span></span><br></pre></td></tr></table></figure>

<h4 id="11-2-every"><a href="#11-2-every" class="headerlink" title="11.2 every"></a>11.2 every</h4><p>自带遍历，对每个元素进行条件判断，如果每个元素都成立返回 true，只要有一项不成立返回 false<br>参数:function(item,index){<br>item 每个元素<br>index 元素的索引<br>}</p>
<h4 id="11-3-some"><a href="#11-3-some" class="headerlink" title="11.3 some"></a>11.3 some</h4><p>自带遍历，对每个元素进行条件判断，只要有一个成立返回 true，都不成立才返回 false<br>参数:function(item,index){<br>item 每个元素<br>index 元素的索引<br>}</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>, <span class="number">5</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">every</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> item &gt; <span class="number">0</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> res1 = arr.<span class="title function_">some</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> item &gt; <span class="number">4</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res1);</span><br></pre></td></tr></table></figure>

<h4 id="11-4-filter"><a href="#11-4-filter" class="headerlink" title="11.4 filter"></a>11.4 filter</h4><p>语法:arr.filter(function(item,index,arr){})<br>item 每个元素<br>index 元素对应的下标<br>arr 当前过滤的数组<br>过滤条件也是以 return 的形式书写<br>返回值:过滤后的新数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">filter</span>(<span class="keyword">function</span> <span class="title function_">a</span>(<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="comment">//以return形式书写过滤的条件</span></span><br><span class="line">  <span class="keyword">return</span> item &gt; <span class="number">200</span>;</span><br><span class="line">  <span class="comment">/* </span></span><br><span class="line"><span class="comment">        filter的原理</span></span><br><span class="line"><span class="comment">        1.准备一个的空数组 []</span></span><br><span class="line"><span class="comment">        2.开始根据数组内的成员调用对应次数的a函数</span></span><br><span class="line"><span class="comment">          2-1 a(111) 返回false 111不加到第一步的数组中 []</span></span><br><span class="line"><span class="comment">          2-2 a(222) ....</span></span><br><span class="line"><span class="comment">          </span></span><br><span class="line"><span class="comment">          五次都走完之后 [222,333,444,555]</span></span><br><span class="line"><span class="comment">        3.返回[222,333,444,555]给res</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res); <span class="comment">//得到的是条件成立的每一项</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> nums = [<span class="number">11</span>, <span class="number">20</span>, <span class="number">55</span>, <span class="number">100</span>, <span class="number">88</span>, <span class="number">32</span>];</span><br><span class="line"><span class="comment">//只要奇数</span></span><br><span class="line"><span class="comment">//for...of</span></span><br><span class="line"><span class="keyword">var</span> newNums = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> item <span class="keyword">of</span> nums) &#123;</span><br><span class="line">  <span class="keyword">if</span> (item % <span class="number">2</span> !== <span class="number">0</span>) &#123;</span><br><span class="line">    newNums.<span class="title function_">push</span>(item);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//filter实现</span></span><br><span class="line"><span class="keyword">var</span> res2 = nums.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> item % <span class="number">2</span> !== <span class="number">0</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 1 true    0 false</span></span><br><span class="line"><span class="comment">// var res3 = nums.filter(item=&gt;item%2)</span></span><br></pre></td></tr></table></figure>

<h4 id="11-5-map"><a href="#11-5-map" class="headerlink" title="11.5 map"></a>11.5 map</h4><ul>
<li>语法:arr.map(function(item,index,arr){})</li>
<li>作用:映射数组</li>
<li>返回值:<ul>
<li>是一个新数组，并且长度和原数组一致</li>
<li>新数组里面的每一个元素都是根据原数组的每个元素映射出来的</li>
<li>映射的条件以 return 形式书写</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> good = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">100</span>, <span class="attr">name</span>: <span class="string">&#x27;麦当劳&#x27;</span>, <span class="attr">price</span>: <span class="number">25</span>, <span class="attr">sold</span>: <span class="number">10</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">101</span>, <span class="attr">name</span>: <span class="string">&#x27;KFC&#x27;</span>, <span class="attr">price</span>: <span class="number">99</span>, <span class="attr">sold</span>: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">102</span>, <span class="attr">name</span>: <span class="string">&#x27;华莱士&#x27;</span>, <span class="attr">price</span>: <span class="number">10</span>, <span class="attr">sold</span>: <span class="number">50</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">103</span>, <span class="attr">name</span>: <span class="string">&#x27;奈雪的茶&#x27;</span>, <span class="attr">price</span>: <span class="number">28</span>, <span class="attr">sold</span>: <span class="number">5</span> &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="comment">//  外卖平台 要抽成100</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">100</span>, <span class="number">200</span>, <span class="number">300</span>, <span class="number">400</span>, <span class="number">500</span>];</span><br><span class="line"><span class="comment">//开始映射</span></span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">map</span>(<span class="keyword">function</span> <span class="title function_">a</span>(<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> item * <span class="number">0.1</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res); <span class="comment">//[10, 20, 30, 40, 50]</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">      原理</span></span><br><span class="line"><span class="comment">      1.准备一个新数组[]</span></span><br><span class="line"><span class="comment">      2.根据原始的数据进行遍历</span></span><br><span class="line"><span class="comment">        =&gt;第一次调用a(100,0,arr) 返回值10 把10放到新数组里面 [10]</span></span><br><span class="line"><span class="comment">        =&gt;第二次调用a(200,1,arr)      20   20      [10,20]</span></span><br><span class="line"><span class="comment">        ...</span></span><br><span class="line"><span class="comment">        [10,20,30,40,50]</span></span><br><span class="line"><span class="comment">      3.把最终的数组作为map函数的返回值给到res</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> goodNewPrice = good.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> item.<span class="property">price</span> + <span class="number">100</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(goodNewPrice);</span><br></pre></td></tr></table></figure>

<h4 id="11-6-reduce"><a href="#11-6-reduce" class="headerlink" title="11.6 reduce"></a>11.6 reduce</h4><ul>
<li>语法:arr.reduce(function(prev,item,index,arr){},intial)<ul>
<li>prev:初始值或者每一次叠加后的结果</li>
<li>item</li>
<li>index</li>
<li>arr</li>
<li>intial:默认是 0，表示从什么位置开始叠加</li>
</ul>
</li>
<li>返回值:累加后的结果</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> good = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">100</span>, <span class="attr">name</span>: <span class="string">&#x27;麦当劳&#x27;</span>, <span class="attr">price</span>: <span class="number">25</span>, <span class="attr">sold</span>: <span class="number">10</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">101</span>, <span class="attr">name</span>: <span class="string">&#x27;KFC&#x27;</span>, <span class="attr">price</span>: <span class="number">99</span>, <span class="attr">sold</span>: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">102</span>, <span class="attr">name</span>: <span class="string">&#x27;华莱士&#x27;</span>, <span class="attr">price</span>: <span class="number">10</span>, <span class="attr">sold</span>: <span class="number">50</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">103</span>, <span class="attr">name</span>: <span class="string">&#x27;奈雪的茶&#x27;</span>, <span class="attr">price</span>: <span class="number">28</span>, <span class="attr">sold</span>: <span class="number">5</span> &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="keyword">var</span> res1 = good.<span class="title function_">reduce</span>(<span class="keyword">function</span> (<span class="params">prev, item</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> prev + item.<span class="property">price</span> * item.<span class="property">sold</span>;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">100</span>, <span class="number">200</span>, <span class="number">300</span>, <span class="number">400</span>, <span class="number">500</span>];</span><br><span class="line"><span class="keyword">var</span> res = arr.<span class="title function_">reduce</span>(<span class="keyword">function</span> <span class="title function_">a</span>(<span class="params">prev, item</span>) &#123;</span><br><span class="line">  <span class="comment">//以return的形式书写每次叠加的操作</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(prev + item);</span><br><span class="line">  <span class="keyword">return</span> prev + item;</span><br><span class="line">  <span class="comment">/* </span></span><br><span class="line"><span class="comment">        reduce的原理</span></span><br><span class="line"><span class="comment">        1.准备一个初始值，按照你传递的第二个参数来定</span></span><br><span class="line"><span class="comment">        2.根据arr来调用a函数</span></span><br><span class="line"><span class="comment">          第一次 a(0,100,0,arr) return 0+100 把这个返回值赋给intial 100</span></span><br><span class="line"><span class="comment">          第二次 a(100,200,1,arr) return 100+200 把这个返回值赋给intial 300</span></span><br><span class="line"><span class="comment">          第三次 a(300,300,2,arr) return 300+300 把这个返回值赋给intial 600</span></span><br><span class="line"><span class="comment">          第四次 a(600,400,3,arr) return 600+400 把这个返回值赋给intial 1000</span></span><br><span class="line"><span class="comment">          第五次 a(1000,500,4,arr) return 1000+500 把这个返回值赋给intial 1500</span></span><br><span class="line"><span class="comment">        3.把intial的结果当作reduce的返回值 给到res</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"><span class="comment">//面试题 统计数组中每个元素出现的次数</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;d&#x27;</span>, <span class="string">&#x27;d&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> obj = arr1.<span class="title function_">reduce</span>(<span class="keyword">function</span> <span class="title function_">haha</span>(<span class="params">prev, item</span>) &#123;</span><br><span class="line">  <span class="comment">// if (prev[item]) &#123;</span></span><br><span class="line">  <span class="comment">//   prev[item] += 1;</span></span><br><span class="line">  <span class="comment">//   return prev;</span></span><br><span class="line">  <span class="comment">// &#125; else &#123;</span></span><br><span class="line">  <span class="comment">//   prev[item] = 1;</span></span><br><span class="line">  <span class="comment">//   return prev;</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  prev[item] = prev[item] + <span class="number">1</span> || <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">return</span> prev;</span><br><span class="line">&#125;, &#123;&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      1. prev = &#123;&#125; 调用haha(&#123;&#125;,&quot;a&quot;) return &#123;a:1&#125; 并且赋给prev</span></span><br><span class="line"><span class="comment">      2. prev= &#123;a:1&#125; 调用haha(&#123;a:1&#125;,&quot;a&quot;) return &#123;a:2&#125; 并赋值给prev</span></span><br><span class="line"><span class="comment">      ...</span></span><br><span class="line"><span class="comment">      最后一次</span></span><br><span class="line"><span class="comment">      prev=&#123;</span></span><br><span class="line"><span class="comment">        a:2,</span></span><br><span class="line"><span class="comment">        b:2,</span></span><br><span class="line"><span class="comment">        c:3</span></span><br><span class="line"><span class="comment">        d:5</span></span><br><span class="line"><span class="comment">      &#125;</span></span><br><span class="line"><span class="comment">      把最终的prev当作reduce的返回值给到obj</span></span><br><span class="line"><span class="comment">      */</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//综合练习</span></span><br><span class="line"><span class="keyword">var</span> nums = [<span class="number">11</span>, <span class="number">20</span>, <span class="number">55</span>, <span class="number">100</span>, <span class="number">88</span>, <span class="number">32</span>]; <span class="comment">//19168</span></span><br><span class="line"><span class="comment">//过滤得到所有的偶数，映射所有偶数的平方 最后计算他们的和</span></span><br><span class="line"><span class="keyword">var</span> total = nums</span><br><span class="line">  .<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> item % <span class="number">2</span> === <span class="number">0</span>;</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> item * item;</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">reduce</span>(<span class="keyword">function</span> (<span class="params">prev, item</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> prev + item;</span><br><span class="line">  &#125;, <span class="number">0</span>);</span><br><span class="line"><span class="comment">// var toal = nums</span></span><br><span class="line"><span class="comment">// .filter(item=&gt;item%2===0)</span></span><br><span class="line"><span class="comment">// .map(item=&gt;item*item)</span></span><br><span class="line"><span class="comment">// .reduce((prev,item)=&gt;prev+item,0)</span></span><br></pre></td></tr></table></figure>

<h3 id="12-数组塌陷"><a href="#12-数组塌陷" class="headerlink" title="12 数组塌陷"></a>12 数组塌陷</h3><h4 id="12-1-概念"><a href="#12-1-概念" class="headerlink" title="12.1 概念"></a>12.1 概念</h4><ul>
<li>当你在数组中删除内容的时候，就会产生塌陷</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//需求:一个数组，每次删除一个元素，把所有的内容删除完毕</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;原来的数组&#x27;</span>, arr);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  arr.<span class="title function_">splice</span>(i, <span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;删除过后的数组&#x27;</span>, arr);</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      [1,2,3,4]</span></span><br><span class="line"><span class="comment">      当你把1删除以后</span></span><br><span class="line"><span class="comment">      原来的2会往前移动，原来2索引是1 现在索引0</span></span><br><span class="line"><span class="comment">      [1,2,3,4] len=4</span></span><br><span class="line"><span class="comment">      i=0 </span></span><br><span class="line"><span class="comment">      arr.splice(0,1)</span></span><br><span class="line"><span class="comment">      [2,3,4] len=3</span></span><br><span class="line"><span class="comment">      i=1</span></span><br><span class="line"><span class="comment">      arr.splice(1,1)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      [2,4] len=2</span></span><br><span class="line"><span class="comment">      i=2 退出循环</span></span><br><span class="line"><span class="comment">      */</span></span><br></pre></td></tr></table></figure>

<h4 id="12-2-解决办法"><a href="#12-2-解决办法" class="headerlink" title="12.2 解决办法"></a>12.2 解决办法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法一：倒着循环</span></span><br><span class="line"><span class="comment">// var arr = [1, 2, 3, 4];</span></span><br><span class="line"><span class="comment">// console.log(&#x27;原来的数组&#x27;, arr);</span></span><br><span class="line"><span class="comment">// for (var i = arr.length - 1; i &gt;= 0; i--) &#123;</span></span><br><span class="line"><span class="comment">//   arr.splice(i, 1);</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// console.log(&#x27;删除过后的数组&#x27;, arr);</span></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      代码执行</span></span><br><span class="line"><span class="comment">      [1,2,3,4] len=4</span></span><br><span class="line"><span class="comment">      i=3 </span></span><br><span class="line"><span class="comment">      arr.splice(3,1)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      [1,2,3] len=3</span></span><br><span class="line"><span class="comment">      i=2</span></span><br><span class="line"><span class="comment">      arr.splice(2,1)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      [1,2] len=2</span></span><br><span class="line"><span class="comment">      i=1</span></span><br><span class="line"><span class="comment">      arr.splice(1,1)</span></span><br><span class="line"><span class="comment">      </span></span><br><span class="line"><span class="comment">      [1] len=1</span></span><br><span class="line"><span class="comment">      i=0</span></span><br><span class="line"><span class="comment">      arr.splice(0,1)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      [] len=0</span></span><br><span class="line"><span class="comment">      i=-1</span></span><br><span class="line"><span class="comment">      退出循环</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="comment">//方法二：每次让i跟着变化</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;原来的数组&#x27;</span>, arr);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//删除一个</span></span><br><span class="line">  arr.<span class="title function_">splice</span>(i, <span class="number">1</span>);</span><br><span class="line">  i--;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;删除过后的数组&#x27;</span>, arr);</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">        [1,2,3,4] len=4</span></span><br><span class="line"><span class="comment">        i=0 </span></span><br><span class="line"><span class="comment">        arr.splice(0,1)</span></span><br><span class="line"><span class="comment">        i--  i=&gt;-1 i=&gt;0</span></span><br><span class="line"><span class="comment">        </span></span><br><span class="line"><span class="comment">        [2,3,4] len=3</span></span><br><span class="line"><span class="comment">        i=0</span></span><br><span class="line"><span class="comment">        arr.splice(0,1)</span></span><br><span class="line"><span class="comment">    </span></span><br><span class="line"><span class="comment">        [3,4] len=2</span></span><br><span class="line"><span class="comment">        i=0</span></span><br><span class="line"><span class="comment">        arr.splice(0,1)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">        [4] len=1</span></span><br><span class="line"><span class="comment">        i=0 </span></span><br><span class="line"><span class="comment">        arr.splice(0,1)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">        [] len=0</span></span><br><span class="line"><span class="comment">        i=0</span></span><br><span class="line"><span class="comment">        循环退出</span></span><br><span class="line"><span class="comment">      */</span></span><br></pre></td></tr></table></figure>

<h3 id="13-数组去重（重点）"><a href="#13-数组去重（重点）" class="headerlink" title="13 数组去重（重点）"></a>13 数组去重（重点）</h3><h4 id="13-1-排序后删除相邻"><a href="#13-1-排序后删除相邻" class="headerlink" title="13.1 排序后删除相邻"></a>13.1 排序后删除相邻</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">//方案一</span></span><br><span class="line"><span class="comment">//1.排序</span></span><br><span class="line">arr.<span class="title function_">sort</span>(<span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a - b;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//2.把重复的删除</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//判断当前的和下一个是否相等</span></span><br><span class="line">  <span class="keyword">if</span> (arr[i] === arr[i + <span class="number">1</span>]) &#123;</span><br><span class="line">    <span class="comment">//删除</span></span><br><span class="line">    arr.<span class="title function_">splice</span>(i, <span class="number">1</span>);</span><br><span class="line">    <span class="comment">//解决塌陷</span></span><br><span class="line">    i--;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      [1(0),1(1),1(2),1(3)] len=15</span></span><br><span class="line"><span class="comment">      i=0</span></span><br><span class="line"><span class="comment">      arr[i]=== arr[i+1]</span></span><br><span class="line"><span class="comment">      i-&gt;-1   i++-&gt;0</span></span><br><span class="line"><span class="comment">      [1(1),1(2),1(3)] len=14</span></span><br><span class="line"><span class="comment">      arr[i] === arr[i+1]</span></span><br><span class="line"><span class="comment">      */</span></span><br></pre></td></tr></table></figure>

<h4 id="13-2-push-时判断是否重复"><a href="#13-2-push-时判断是否重复" class="headerlink" title="13.2 push 时判断是否重复"></a>13.2 push 时判断是否重复</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      方案2:</span></span><br><span class="line"><span class="comment">      1. 准备新数组</span></span><br><span class="line"><span class="comment">      2. 遍历原来的数组，一个个添加进去</span></span><br><span class="line"><span class="comment">        添加的时候我们需要判断是否已经存在</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">        =&gt;判断数组是否已经存在某个元素</span></span><br><span class="line"><span class="comment">        indexOf </span></span><br><span class="line"><span class="comment">        =&gt; -1 没有</span></span><br><span class="line"><span class="comment">        =&gt; 只要不是-1 有</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (newArr.<span class="title function_">indexOf</span>(arr[i]) === -<span class="number">1</span>) &#123;</span><br><span class="line">    newArr.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br></pre></td></tr></table></figure>

<h4 id="13-3-利用对象键名不重复"><a href="#13-3-利用对象键名不重复" class="headerlink" title="13.3 利用对象键名不重复"></a>13.3 利用对象键名不重复</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      方案:利用对象的key不能重复</span></span><br><span class="line"><span class="comment">        1.准备好一个空对象</span></span><br><span class="line"><span class="comment">        2.遍历原来的数组把item当作对象的key 添加到对象内</span></span><br><span class="line"><span class="comment">        3.把对象变成数组</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">var</span> item = arr[i];</span><br><span class="line">  <span class="comment">//item拿到的就是每个元素</span></span><br><span class="line">  <span class="comment">//把item作为对象的key添加进去 value不管</span></span><br><span class="line">  obj[item] = <span class="string">&#x27;好痛苦&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(obj));</span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">  <span class="comment">//键名 key obj[key]</span></span><br><span class="line">  newArr.<span class="title function_">push</span>(key - <span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br></pre></td></tr></table></figure>

<h4 id="13-4-set"><a href="#13-4-set" class="headerlink" title="13.4 set"></a>13.4 set</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      es6 有一个数据结构叫set 他天生不允许重复</span></span><br><span class="line"><span class="comment">      new Set 创建一个set</span></span><br><span class="line"><span class="comment">      ... 就是把set里面的东西全部倒出来</span></span><br><span class="line"><span class="comment">      []声明数组</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)]);</span><br></pre></td></tr></table></figure>

<h4 id="13-5-挨个比较"><a href="#13-5-挨个比较" class="headerlink" title="13.5 挨个比较"></a>13.5 挨个比较</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      去重方法:</span></span><br><span class="line"><span class="comment">      1.循环遍历原数组</span></span><br><span class="line"><span class="comment">      2.每一个item去和后面所有item挨个比较</span></span><br><span class="line"><span class="comment">        如果相同 把后面的item删除splice(？,1)</span></span><br><span class="line"><span class="comment">        如果不同 什么都不做</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//arr[i]就是item</span></span><br><span class="line">  <span class="comment">/* </span></span><br><span class="line"><span class="comment">        2.判断重复</span></span><br><span class="line"><span class="comment">          var arr = [1, 2, 3, 4, 1, 1, 2, 3, 2, 3, 1, 2, 3, 4, 5];</span></span><br><span class="line"><span class="comment">                     0  1</span></span><br><span class="line"><span class="comment">          如果我拿到的是数据1，去检查是否和后面的1相同？</span></span><br><span class="line"><span class="comment">          arr.indexOf(1,0+1)// 0数据本身的索引+1 跳过自己往后查找</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">          arr.indexOf(2,1+1)</span></span><br><span class="line"><span class="comment">          ...</span></span><br><span class="line"><span class="comment">          arr.indexOf(数据,数据索引+1)</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">  <span class="keyword">var</span> index = arr.<span class="title function_">indexOf</span>(arr[i], i + <span class="number">1</span>);</span><br><span class="line">  <span class="keyword">if</span> (index != -<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="comment">//表明后面有重复，删除它</span></span><br><span class="line">    arr.<span class="title function_">splice</span>(index, <span class="number">1</span>);</span><br><span class="line">    i--;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;处理完的数组&#x27;</span>, arr);</span><br></pre></td></tr></table></figure>

<h3 id="总结-1"><a href="#总结-1" class="headerlink" title="总结"></a>总结</h3><ul>
<li><p>数组常用方法通用语法:数组名.xxx()</p>
<ul>
<li>方法名不同</li>
<li>参数不同</li>
</ul>
</li>
<li><p>方法<br>push-pop shift-unshift<br>splice<br>slice<br>concat<br>join - split<br>indexOf、lastIndexOf<br>includes<br>find、findIndex<br>sort<br>reverse<br>forEach(function(item,index,arr){})<br>every<br>some<br>filter<br>map<br>reduce</p>
</li>
</ul>
<ol>
<li>会修改原数组的方法<br>push-pop、unshift-shift、splice<br>sort、reverse</li>
<li>不会修改原数组的方法<br>slice、concat、join、indexOf、lastIndexOf、<br>includes、find、findIndex、forEach、every、some<br>filter、map、reduce</li>
</ol>
<h2 id="常见内置类"><a href="#常见内置类" class="headerlink" title="常见内置类"></a>常见内置类</h2><h3 id="包装类型"><a href="#包装类型" class="headerlink" title="包装类型"></a>包装类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//奇怪现象🤔</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;Hello world&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> num = <span class="number">18</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="property">length</span>); <span class="comment">//拿到字符串的长度 11</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">split</span>(<span class="string">&#x27; &#x27;</span>)); <span class="comment">// [&#x27;Hello&#x27;, &#x27;world&#x27;]</span></span><br><span class="line"><span class="comment">//因为js为了可以使得它能够获取属性以及调用方法，自动对它封装了对应的包装类型</span></span><br><span class="line"><span class="comment">//实际上它有自己的构造函数</span></span><br><span class="line"><span class="comment">//他的构造函数的用处，默认情况下直接使用原始数据类型的值的时候 你可以把它的构造函数忽视</span></span><br><span class="line"><span class="comment">//但是 一旦你 访问它的属性/调用它的方法 这个时候js引擎会帮我们做一些事</span></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      str = new String(str) </span></span><br><span class="line"><span class="comment">      str.length  str.xxx()</span></span><br><span class="line"><span class="comment">      js引擎就会把它 回收掉   把你的str再次变成原始类型的hello world</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//模拟包装的过程</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">String</span>(<span class="params">str</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">str</span> = str;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">length</span> = <span class="number">11</span>;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">xxx</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;alex&#x27;</span>,</span><br><span class="line">  <span class="attr">eat</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;吃嘛嘛香～&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//对象调用自身方法</span></span><br><span class="line">obj.<span class="title function_">eat</span>();</span><br><span class="line"><span class="comment">//对象访问自身属性</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span>);</span><br><span class="line"><span class="comment">//常见的包装类型 String Number Boolean Symbol BigInt</span></span><br></pre></td></tr></table></figure>

<p>因为 js 为了可以使其<strong>获取属性和调用方法</strong>，<strong>对其封装了对应的包装类型</strong><br>注意:null、undefined 没有任何方法，也没有对应的“对象包装类”</p>
<h3 id="数字类型-Number-类属性"><a href="#数字类型-Number-类属性" class="headerlink" title="数字类型 Number 类属性"></a>数字类型 Number 类属性</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. Number上的类属性</span></span><br><span class="line"><span class="comment">//Number构造函数-&gt;window.Number</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">123</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="property">MAX_VALUE</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="property">MIN_VALUE</span>);</span><br><span class="line"><span class="comment">//integer 整数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="property">MAX_SAFE_INTEGER</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="property">MIN_SAFE_INTEGER</span>);</span><br></pre></td></tr></table></figure>

<h4 id="toString-实例方法"><a href="#toString-实例方法" class="headerlink" title="toString 实例方法"></a>toString 实例方法</h4><p><code>toString(base)</code></p>
<ul>
<li>将数字转成字符串，并且按照 base 进制</li>
<li>base 是进制，默认是 10</li>
<li>如果直接对一个数字操作，需要使用<code>..</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//2-1 toString(base) 把数字转成字符串</span></span><br><span class="line"><span class="comment">//默认是十进制，可以填入你要的进制，返回的是一个字符串</span></span><br><span class="line"><span class="comment">//base进制</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num.<span class="title function_">toString</span>(<span class="number">2</span>)); <span class="comment">//11</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num.<span class="title function_">toString</span>(<span class="number">8</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num.<span class="title function_">toString</span>(<span class="number">16</span>)); <span class="comment">//字符串 没加0x</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>((<span class="number">123</span>).<span class="title function_">toString</span>(<span class="number">2</span>));</span><br></pre></td></tr></table></figure>

<h4 id="toFixed-实例方法"><a href="#toFixed-实例方法" class="headerlink" title="toFixed 实例方法"></a>toFixed 实例方法</h4><p><code>toFixed(你要的数字)</code><br><code>toFixed(digits)</code><br>格式化一个数字，保留 digits 位的小数<br>保留方式是四舍五入，返回的是一个<strong>字符串</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> pi = <span class="number">3.1415926</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(pi.<span class="title function_">toFixed</span>(<span class="number">3</span>)); <span class="comment">//3.142</span></span><br></pre></td></tr></table></figure>

<h4 id="parseInt-parseFloat-类方法"><a href="#parseInt-parseFloat-类方法" class="headerlink" title="parseInt parseFloat 类方法"></a>parseInt parseFloat 类方法</h4><p><code>Number.parseInt()</code><br><code>parseInt()</code><br>这两个方法都没有四舍五入</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num1 = <span class="string">&#x27;123.521&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>(num1).<span class="title function_">toFixed</span>(<span class="number">0</span>)); <span class="comment">//124</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="built_in">parseInt</span>(num1)); <span class="comment">//123</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Number</span>.<span class="built_in">parseFloat</span>(num1)); <span class="comment">//123.521</span></span><br><span class="line"><span class="comment">//其实也有全局的对应方法 放在window上</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">parseInt</span>(num1)); <span class="comment">//123 不报错</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="built_in">parseInt</span> === <span class="title class_">Number</span>.<span class="property">parseInt</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<ul>
<li>开发中常用的是：toFixed,parseInt,parseFloat</li>
</ul>
<h3 id="数学对象-Math"><a href="#数学对象-Math" class="headerlink" title="数学对象 Math"></a>数学对象 Math</h3><p>Math 是一个对象，<strong>不是构造函数</strong><br>属性：Math.PI 圆周率<br>方法:<br>Math.floor 向下取整<br>Math.ceil 向上取整<br>Math.round 四舍五入<br>Math.random 随机数 包括 0 不包括 1<br>Math.pow 求幂</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// console.log(typeof Number); //function</span></span><br><span class="line"><span class="comment">// console.log(typeof Math); //object</span></span><br><span class="line"><span class="comment">// var num = new Number(123);</span></span><br><span class="line"><span class="comment">//var math = new Math();</span></span><br><span class="line"><span class="comment">//属性 圆周率</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="property">PI</span>); <span class="comment">//</span></span><br><span class="line"><span class="comment">//方法 Math.random() [0,1)包括0 不包括1</span></span><br><span class="line"><span class="comment">//其他方法一起使用 [0,1] [a,b]</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">3.55</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">floor</span>(num)); <span class="comment">//3 向下取整</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">ceil</span>(num)); <span class="comment">//4 向上取整</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">round</span>(num)); <span class="comment">//4四舍五入</span></span><br><span class="line"><span class="comment">//生成[5,50)随机数</span></span><br><span class="line"><span class="comment">//[0,45) 50-5=45</span></span><br><span class="line"><span class="comment">//[5,50)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">45</span>) + <span class="number">5</span>);</span><br><span class="line"><span class="comment">//[5,50] 包括5,包括50</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">46</span>) + <span class="number">5</span>);</span><br><span class="line"><span class="comment">//(5,50)  (n,m)</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fullOpen</span>(<span class="params">n, m</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> res = <span class="title class_">Math</span>.<span class="title function_">random</span>() * (m - n) + n;</span><br><span class="line">  <span class="keyword">while</span> (res === n) &#123;</span><br><span class="line">    res = <span class="title class_">Math</span>.<span class="title function_">random</span>() * (m - n) + n;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//求幂</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">2</span>, <span class="number">4</span>)); <span class="comment">//2^4=16</span></span><br></pre></td></tr></table></figure>

<h3 id="String-的补充"><a href="#String-的补充" class="headerlink" title="String 的补充"></a>String 的补充</h3><h4 id="String-常见的属性"><a href="#String-常见的属性" class="headerlink" title="String 常见的属性"></a>String 常见的属性</h4><p>str.length 返回字符串的长度</p>
<h4 id="字符串的访问"><a href="#字符串的访问" class="headerlink" title="字符串的访问"></a>字符串的访问</h4><ol>
<li><code>str[索引]</code> <code>str[index]</code></li>
<li><code>str.charAt(索引)</code> <code>str.charAt(pos)</code><br>这两种方法正常访问没有区别，但是访问不存在的<br>[]返回 undfined chatAt 返回空字符</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> message = <span class="string">&#x27;hello world&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(message.<span class="property">length</span>); <span class="comment">//11</span></span><br><span class="line"><span class="comment">//访问字符</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(message[<span class="number">0</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(message.<span class="title function_">charAt</span>(<span class="number">4</span>));</span><br><span class="line"><span class="comment">//区别</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(message[<span class="number">20</span>]); <span class="comment">//undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(message.<span class="title function_">charAt</span>(<span class="number">20</span>)); <span class="comment">//空</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//喇叭花数 100～999的一个数，abc = a!+b!+c!</span></span><br><span class="line"><span class="comment">//我们首先需要一个阶乘器</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">jc</span>(<span class="params">n</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> result = <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= n; i++) &#123;</span><br><span class="line">    result *= i;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">jc</span>(<span class="number">0</span>));</span><br><span class="line"><span class="comment">//穷举100～999的所有数字</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">100</span>; i &lt;= <span class="number">999</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">var</span> str = i.<span class="title function_">toString</span>(); <span class="comment">//转成字符串</span></span><br><span class="line">  <span class="keyword">var</span> a = <span class="title class_">Number</span>(str[<span class="number">0</span>]); <span class="comment">//第一位</span></span><br><span class="line">  <span class="keyword">var</span> b = <span class="title class_">Number</span>(str[<span class="number">1</span>]);</span><br><span class="line">  <span class="keyword">var</span> c = <span class="title class_">Number</span>(str[<span class="number">2</span>]);</span><br><span class="line">  <span class="keyword">if</span> (<span class="title function_">jc</span>(a) + <span class="title function_">jc</span>(b) + <span class="title function_">jc</span>(c) === i) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="字符串的遍历"><a href="#字符串的遍历" class="headerlink" title="字符串的遍历"></a>字符串的遍历</h4><p>方式一:for 循环<br>方式二:for…of</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line"><span class="comment">//for遍历</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; msg.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(msg[i]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//for...of-&gt;可迭代</span></span><br><span class="line"><span class="comment">//两个可迭代：字符串 数组</span></span><br><span class="line"><span class="comment">//String对象内部是将字符串变成了一个可迭代的</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> char <span class="keyword">of</span> msg) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(char);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="修改字符串"><a href="#修改字符串" class="headerlink" title="修改字符串"></a>修改字符串</h4><p>字符串的不可变</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;Alex&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg[<span class="number">0</span>]); <span class="comment">//a</span></span><br><span class="line"><span class="comment">//字符串的不可更改性</span></span><br><span class="line">msg[<span class="number">0</span>] = <span class="string">&#x27;1232131231231231&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg); <span class="comment">//blex</span></span><br><span class="line"><span class="comment">//大小写转换</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">toLowerCase</span>()); <span class="comment">//小写</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">toUpperCase</span>()); <span class="comment">//大写 ALEX</span></span><br></pre></td></tr></table></figure>

<h4 id="查找字符串"><a href="#查找字符串" class="headerlink" title="查找字符串"></a>查找字符串</h4><p>方法一:indexOf<br><code>indexOf(你要查找的字符,开始查找的位置)</code><br><code>indexOf(searchString,position)</code><br>position 是可选的，不写的时候，从索引为 0 的位置开始查找</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法一 查找字符串的位置</span></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      str.indexOf(serachString,[position])</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;my name is alex,我喜欢ikun&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">indexOf</span>(<span class="string">&#x27;alex&#x27;</span>)); <span class="comment">//11 返回的是索引</span></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">indexOf</span>(name, <span class="number">18</span>)); <span class="comment">//-1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">indexOf</span>(<span class="string">&#x27;dog&#x27;</span>)); <span class="comment">//-1 找不到给你返回-1</span></span><br><span class="line"><span class="keyword">var</span> index = msg.<span class="title function_">indexOf</span>(name);</span><br><span class="line"><span class="keyword">if</span> (index !== -<span class="number">1</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;变量msg中有变量name&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;没有找到&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>方法二:includes<br>es6 新增的，是否包含字符串<br><code>str.includes(searchString,position)</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法二 es6新增的 是否包含字符串</span></span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      str.includes(searchString,position)</span></span><br><span class="line"><span class="comment">      position可以省略</span></span><br><span class="line"><span class="comment">      */</span></span><br><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;my name is alex,我喜欢ikun&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">includes</span>(name)); <span class="comment">//true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">includes</span>(<span class="string">&#x27;alex.&#x27;</span>)); <span class="comment">//false</span></span><br></pre></td></tr></table></figure>

<h4 id="开头和结尾"><a href="#开头和结尾" class="headerlink" title="开头和结尾"></a>开头和结尾</h4><ul>
<li>startsWith(你要的字符)</li>
<li>endsWith(你要的字符)</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;my name is alex,我喜欢ikun&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&#x27;alex&#x27;</span>;</span><br><span class="line"><span class="keyword">if</span> (msg.<span class="title function_">startsWith</span>(<span class="string">&#x27;my&#x27;</span>)) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;msg是以my开头的&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span> (msg.<span class="title function_">endsWith</span>(<span class="string">&#x27;ikun&#x27;</span>)) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;msg是以ikun结尾的&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">startsWith</span>(name)); <span class="comment">//false</span></span><br></pre></td></tr></table></figure>

<h4 id="替换字符串"><a href="#替换字符串" class="headerlink" title="替换字符串"></a>替换字符串</h4><p><code>str.replace(regexp|substr,newSubStr|function)</code><br>查找对应的字符串，并且用新的字符串替代<br>这里可以传入一个正则表达式(regexp)来查找，也可以传入一个函数来替换</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;my name is alex&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">replace</span>(<span class="string">&#x27;alex&#x27;</span>, <span class="string">&#x27;ikun&#x27;</span>));</span><br><span class="line">msg = msg.<span class="title function_">replace</span>(<span class="string">&#x27;alex&#x27;</span>, <span class="string">&#x27;ikun&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&#x27;tom&#x27;</span>;</span><br><span class="line"><span class="comment">//函数的情况</span></span><br><span class="line"><span class="keyword">var</span> msg2 = msg.<span class="title function_">replace</span>(<span class="string">&#x27;ikun&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> name.<span class="title function_">toUpperCase</span>(); <span class="comment">//TOM</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg2);</span><br></pre></td></tr></table></figure>

<h4 id="截取字符串"><a href="#截取字符串" class="headerlink" title="截取字符串"></a>截取字符串</h4><ul>
<li>slice(start,end) 从 start 到 end (不包含 end) 允许负值</li>
<li>substring(start,end) 从 start 到 end (不包含 end) 不允许负值(负值代表 0)</li>
<li>substr(start,length) 从 start 开始截取长度为 length 的字符串 允许 start 为负值</li>
<li>开发推荐 <strong>slice</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;Hello world&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取子字符串</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">slice</span>(<span class="number">3</span>, <span class="number">7</span>)); <span class="comment">//lo w</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">slice</span>(<span class="number">3</span>, -<span class="number">1</span>)); <span class="comment">//lo worl</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">slice</span>(<span class="number">3</span>)); <span class="comment">//lo world</span></span><br></pre></td></tr></table></figure>

<h4 id="其他方法"><a href="#其他方法" class="headerlink" title="其他方法"></a>其他方法</h4><ol>
<li>str.concat(str,[,…strN]) 拼接字符串</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str1 = <span class="string">&#x27;my&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">&#x27;name&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> str3 = <span class="string">&#x27;kern&#x27;</span>;</span><br><span class="line"><span class="comment">//1.学过的拼接方式 +</span></span><br><span class="line"><span class="keyword">var</span> newStr = str1 + str2 + str3;</span><br><span class="line"><span class="comment">//2.concat的链式调用</span></span><br><span class="line"><span class="keyword">var</span> newStr2 = str1.<span class="title function_">concat</span>(str2).<span class="title function_">concat</span>(str3);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newStr, newStr2);</span><br><span class="line"><span class="keyword">var</span> newStr3 = str1.<span class="title function_">concat</span>(str2, str3, <span class="string">&#x27;abc&#x27;</span>, <span class="string">&#x27;bca&#x27;</span>, <span class="string">&#x27;nba&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newStr3);</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>删除首尾空格<br><code>str.trim()</code></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ipt = <span class="string">&#x27;    alex       handsome            &#x27;</span>.<span class="title function_">trim</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(ipt);</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>字符串分割<br><code>str.split([separator[,limit]])</code><br>separator:以什么字符进行分割，也可以是一个正则<br>limit:限制返回的数量</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;abc-cba-nba-mba&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> arr = msg.<span class="title function_">split</span>(<span class="string">&#x27;-&#x27;</span>);</span><br><span class="line"><span class="comment">//把字符串转成数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr);</span><br></pre></td></tr></table></figure>

<h2 id="Array"><a href="#Array" class="headerlink" title="Array"></a>Array</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>, <span class="number">40</span>, <span class="number">50</span>];</span><br><span class="line"><span class="comment">//1. 求数组内所有元素的和</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr[i]);</span><br><span class="line">  sum += arr[i];</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sum);</span><br><span class="line"><span class="comment">//2. 求arr内的最大的数</span></span><br><span class="line"><span class="comment">//假设max是最大的</span></span><br><span class="line"><span class="keyword">var</span> max = arr[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//一次和max进行比较，比他大就赋值给max，其他情况不变</span></span><br><span class="line">  <span class="keyword">if</span> (arr[i] &gt; max) &#123;</span><br><span class="line">    max = arr[i];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//简写</span></span><br><span class="line">  <span class="comment">// max = arr[i] &gt; max ? arr[i] : max;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(max);</span><br><span class="line"><span class="comment">//3. 求arr1内最小的数字的索引</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">100</span>, <span class="number">200</span>, <span class="number">1994</span>, <span class="number">1</span>, <span class="number">12</span>, <span class="number">23</span>];</span><br><span class="line"><span class="comment">//设minIndex是最小数的索引 arr1[minIndex]</span></span><br><span class="line"><span class="keyword">var</span> minIndex = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr1.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (arr1[i] &lt; arr1[minIndex]) &#123;</span><br><span class="line">    minIndex = i;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(minIndex);</span><br><span class="line"><span class="comment">//4. 循环得到一个10～20的所有整数，并且放到数组里面</span></span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">10</span>; i &lt;= <span class="number">20</span>; i++) &#123;</span><br><span class="line">  <span class="comment">//10 11 12 13 14 15...20</span></span><br><span class="line">  <span class="comment">//0  1  2  3</span></span><br><span class="line">  <span class="comment">//方法一:利用i和索引的关系</span></span><br><span class="line">  <span class="comment">// newArr[i - 10] = i;</span></span><br><span class="line">  <span class="comment">//方法二:利用索引添加</span></span><br><span class="line">  newArr[newArr.<span class="property">length</span>] = i;</span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">        []   0   10</span></span><br><span class="line"><span class="comment">        [10] 1   11  newArr[1]=11</span></span><br><span class="line"><span class="comment">        [10,11]</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"><span class="comment">//5.把1000～2000之间的所有的闰年放到数组里面</span></span><br><span class="line"><span class="keyword">var</span> year = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1000</span>; i &lt;= <span class="number">2000</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> ((i % <span class="number">4</span> === <span class="number">0</span> &amp;&amp; i % <span class="number">100</span> !== <span class="number">0</span>) || i % <span class="number">400</span> === <span class="number">0</span>) &#123;</span><br><span class="line">    year[year.<span class="property">length</span>] = i;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(year);</span><br></pre></td></tr></table></figure>

<h2 id="Date-日期"><a href="#Date-日期" class="headerlink" title="Date 日期"></a>Date 日期</h2><p>get 获取<br>year 年<br>month 月<br>day 日<br>date 日期<br>hour(s) 小时<br>minute(s) 分钟<br>second(s) 秒<br>millSeconds 毫秒<br>time 时间</p>
<h3 id="new-Date"><a href="#new-Date" class="headerlink" title="new Date()"></a>new Date()</h3><ul>
<li>new Date()在不传递参数的情况下返回的是当前时间</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time); <span class="comment">//Tue Apr 18 2023 10:13:04 GMT+0800 (中国标准时间)</span></span><br></pre></td></tr></table></figure>

<ul>
<li>new Date 传递参数的多种情况</li>
</ul>
<ol>
<li>传递两个数字<br>第一个数字表示年份，第二个数字表示月份</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="number">2023</span>, <span class="number">10</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time); <span class="comment">//Wed Nov 01 2023 00:00:00 GMT+0800 (中国标准时间)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//月份的范围0～11 0表示1月 11表示12月</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>传递三个<br>前两个不变，第三个表示该月的第几天 1~31</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="number">2023</span>, <span class="number">3</span>, <span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time); <span class="comment">//今天</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>传递四个<br>前三个不变，最后一个是小时数 0~23</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="number">2023</span>, <span class="number">3</span>, <span class="number">18</span>, <span class="number">20</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time);</span><br></pre></td></tr></table></figure>

<ol start="4">
<li><p>传递五个<br>前四个不变，最后一个表示分钟 0~59</p>
</li>
<li><p>传递六个<br>前五个不变，最后一个表示秒 0 ～ 59</p>
</li>
<li><p>传递字符串</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2023&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> time1 = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2023-02&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> time2 = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2023-02-18&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> time3 = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2023-02-18 13:&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> time4 = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2023-02-18 13:13&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> time5 = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2023-02-18 13:13:13&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time, time1, time2, time3, time4, time5);</span><br></pre></td></tr></table></figure>

<h3 id="日期格式化"><a href="#日期格式化" class="headerlink" title="日期格式化"></a>日期格式化</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// function Date()&#123;</span></span><br><span class="line"><span class="comment">//   this.getMonth=function()&#123;</span></span><br><span class="line"><span class="comment">//     return 具体月份</span></span><br><span class="line"><span class="comment">//   &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time);</span><br><span class="line"><span class="comment">// Date - time  类(构造函数)-实例对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取年份 2023</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getFullYear</span>());</span><br><span class="line"><span class="comment">//获取月份 0～11表示</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getMonth</span>()); <span class="comment">//3</span></span><br><span class="line"><span class="comment">//获取那一天 18号</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getDate</span>());</span><br><span class="line"><span class="comment">//小时 10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getHours</span>());</span><br><span class="line"><span class="comment">//分钟</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getMinutes</span>());</span><br><span class="line"><span class="comment">//秒钟</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getSeconds</span>());</span><br><span class="line"><span class="comment">//周几  0～6 0表示周日</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getDay</span>());</span><br><span class="line"><span class="comment">//获取执行时间到`格林威治时间的`毫秒数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(time.<span class="title function_">getTime</span>());</span><br><span class="line"><span class="comment">//编程中比较特殊的一个时间`格林威治时间的`</span></span><br><span class="line"><span class="comment">//2023 xx  xx</span></span><br><span class="line"><span class="comment">//1970年1月1日00:00:00</span></span><br></pre></td></tr></table></figure>

<p>案例</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//格式化时间</span></span><br><span class="line"><span class="comment">//我们需要从时间中拿到 年 月 日...</span></span><br><span class="line"><span class="comment">//月份 需要+1</span></span><br><span class="line"><span class="comment">//判断 上午/下午</span></span><br><span class="line"><span class="comment">//调整为12小时</span></span><br><span class="line"><span class="comment">//调整星期 0～6</span></span><br><span class="line"><span class="comment">//格式化的结果打印</span></span><br><span class="line"><span class="keyword">var</span> year = time.<span class="title function_">getFullYear</span>();</span><br><span class="line"><span class="keyword">var</span> month = time.<span class="title function_">getMonth</span>();</span><br><span class="line"><span class="keyword">var</span> date = time.<span class="title function_">getDate</span>();</span><br><span class="line"><span class="keyword">var</span> hours = time.<span class="title function_">getHours</span>();</span><br><span class="line"><span class="keyword">var</span> minutes = time.<span class="title function_">getMinutes</span>();</span><br><span class="line"><span class="keyword">var</span> seconds = time.<span class="title function_">getSeconds</span>();</span><br><span class="line"><span class="keyword">var</span> day = time.<span class="title function_">getDay</span>();</span><br><span class="line"><span class="comment">//处理月份</span></span><br><span class="line">month += <span class="number">1</span>;</span><br><span class="line"><span class="comment">//上午/下午</span></span><br><span class="line"><span class="keyword">var</span> str = hours &gt;= <span class="number">12</span> ? <span class="string">&#x27;下午&#x27;</span> : <span class="string">&#x27;上午&#x27;</span>;</span><br><span class="line"><span class="comment">//12小时</span></span><br><span class="line">hours %= <span class="number">12</span>;</span><br><span class="line"><span class="comment">//星期</span></span><br><span class="line"><span class="keyword">var</span> s = <span class="string">&#x27;日一二三四五六&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> week = <span class="string">`星期<span class="subst">$&#123;s[day]&#125;</span>`</span>;</span><br><span class="line"><span class="comment">// m &gt;10?m:0+m</span></span><br><span class="line"><span class="comment">//拼起来</span></span><br><span class="line"><span class="keyword">var</span> res = <span class="string">`<span class="subst">$&#123;year&#125;</span>年<span class="subst">$&#123;month&#125;</span>月<span class="subst">$&#123;date&#125;</span>日<span class="subst">$&#123;str&#125;</span>--<span class="subst">$&#123;hours&#125;</span>点<span class="subst">$&#123;minutes&#125;</span>分<span class="subst">$&#123;seconds&#125;</span>秒--<span class="subst">$&#123;week&#125;</span>`</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br></pre></td></tr></table></figure>

<h3 id="获取时间差"><a href="#获取时间差" class="headerlink" title="获取时间差"></a>获取时间差</h3><p>封装版本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Date</span>&#125; curr 当前时间</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Date</span>&#125; tar 目标时间</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span>  处理好的时间差对象</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">diffTime</span>(<span class="params">curr, tar</span>) &#123;</span><br><span class="line">  <span class="comment">//curr表示当前时间</span></span><br><span class="line">  <span class="comment">//tar表示目标时间</span></span><br><span class="line">  <span class="keyword">var</span> diffMs = <span class="title class_">Math</span>.<span class="title function_">ceil</span>((tar.<span class="title function_">getTime</span>() - curr.<span class="title function_">getTime</span>()) / <span class="number">1000</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(diffMs); <span class="comment">//秒</span></span><br><span class="line">  <span class="comment">//推算出hour minute second</span></span><br><span class="line">  <span class="keyword">var</span> day = <span class="title class_">Math</span>.<span class="title function_">floor</span>(diffMs / (<span class="number">24</span> * <span class="number">60</span> * <span class="number">60</span>)); <span class="comment">//1.5   1天 xx小时</span></span><br><span class="line">  <span class="keyword">var</span> hours = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diffMs % (<span class="number">24</span> * <span class="number">60</span> * <span class="number">60</span>)) / (<span class="number">60</span> * <span class="number">60</span>));</span><br><span class="line">  <span class="keyword">var</span> minutes = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diffMs % (<span class="number">60</span> * <span class="number">60</span>)) / <span class="number">60</span>);</span><br><span class="line">  <span class="keyword">var</span> seconds = diffMs % <span class="number">60</span>;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">day</span>: day, <span class="attr">hours</span>: hours, <span class="attr">minutes</span>: minutes, <span class="attr">seconds</span>: seconds &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>推导和使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">//时间差</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">/* </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    1. 两个时间都转成毫秒数</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    2. 相减</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    3. 转回你要的格式</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      */</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">//准备两个时间</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> current = <span class="keyword">new</span> <span class="title class_">Date</span>();</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> target = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="number">2023</span>, <span class="number">3</span>, <span class="number">28</span>, <span class="number">18</span>, <span class="number">00</span>, <span class="number">00</span>);</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(current, <span class="string">&#x27;-----&#x27;</span>, target);</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">//求相差的毫秒数 -&gt; 秒</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> diffMs = <span class="title class_">Math</span>.<span class="title function_">ceil</span>((target.<span class="title function_">getTime</span>() - current.<span class="title function_">getTime</span>()) / <span class="number">1000</span>);</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(diffMs); <span class="comment">//秒</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">//推算出hour minute second</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> day = <span class="title class_">Math</span>.<span class="title function_">floor</span>(diffMs / (<span class="number">24</span> * <span class="number">60</span> * <span class="number">60</span>)); <span class="comment">//1.5   1天 xx小时</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> hours = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diffMs % (<span class="number">24</span> * <span class="number">60</span> * <span class="number">60</span>)) / (<span class="number">60</span> * <span class="number">60</span>));</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> minutes = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diffMs % (<span class="number">60</span> * <span class="number">60</span>)) / <span class="number">60</span>);</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> seconds = diffMs % <span class="number">60</span>;</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`<span class="subst">$&#123;day&#125;</span>天<span class="subst">$&#123;hours&#125;</span>时<span class="subst">$&#123;minutes&#125;</span>分<span class="subst">$&#123;seconds&#125;</span>秒`</span>);</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">//封装📦到函数里</span></span></span><br><span class="line"><span class="language-javascript">      <span class="comment">/* </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      =&gt;参数 几个参数？</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        一个是当前时间 一个是目标时间</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      =&gt;返回值 </span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        字符串 `xx天xx时xx分xx秒`</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        数组 [10,6,59,33] [10,10,10,10]</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        对象 &#123;day:10,hours:6,minutes:3,seconds:33&#125;</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">      */</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">function</span> <span class="title function_">diffTime</span>(<span class="params">curr, tar</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//curr表示当前时间</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//tar表示目标时间</span></span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./utils.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> time1 = <span class="keyword">new</span> <span class="title class_">Date</span>();</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> time2 = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2023-11-11 00:00:00&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">var</span> res = <span class="title function_">diffTime</span>(time1, time2);</span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h3><h4 id="setTimeout-fn-时间"><a href="#setTimeout-fn-时间" class="headerlink" title="setTimeout(fn,时间)"></a>setTimeout(fn,时间)</h4><p>定时一段时间后执行 fn<br>时间是毫秒数，写 0&#x2F;不写 都会“立即执行”<br>定时器还可以有更多的参数，时间到了以后会把多余的参数按照顺序依次传递给 fn</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setTimeout(function () &#123;</span></span><br><span class="line"><span class="comment">//   console.log(&#x27;时间到了&#x27;);</span></span><br><span class="line"><span class="comment">// &#125;);</span></span><br><span class="line"><span class="built_in">setTimeout</span>(</span><br><span class="line">  <span class="keyword">function</span> (<span class="params">a, b, c</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="number">1000</span>,</span><br><span class="line">  <span class="string">&#x27;周末&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;放假&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;去正佳玩&#x27;</span></span><br><span class="line">);</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(a + b);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//一秒后计算10+20</span></span><br><span class="line"><span class="comment">//add()直接调用了,函数在传递的时候 add</span></span><br><span class="line"><span class="built_in">setTimeout</span>(add, <span class="number">1000</span>, <span class="number">10</span>, <span class="number">20</span>);</span><br><span class="line"><span class="comment">//清除定时器</span></span><br><span class="line"><span class="keyword">var</span> res = <span class="built_in">setTimeout</span>(add, <span class="number">0</span>, <span class="number">10</span>, <span class="number">20</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res); <span class="comment">//他是一个数字,表示当前页面的第几个定时器是用来清除定时器的</span></span><br><span class="line"><span class="built_in">clearTimeout</span>(res); <span class="comment">//清除定时器</span></span><br></pre></td></tr></table></figure>

<h4 id="setInterval-fn-时间"><a href="#setInterval-fn-时间" class="headerlink" title="setInterval(fn,时间)"></a>setInterval(fn,时间)</h4><p>反复调用定时器<br>语法和 setTimeout 类似<br>清除定时器用 clearInterval(res)</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">CoderT</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2022/09/19/JavaScript%E5%9F%BA%E7%A1%80/">http://example.com/2022/09/19/JavaScript%E5%9F%BA%E7%A1%80/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">CoderT</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JavaScript/">JavaScript</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/2022/09/25/JavaScript%E9%AB%98%E9%98%B6/" title="Javascript高阶"><img class="cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Javascript高阶</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2022/09/25/JavaScript%E9%AB%98%E9%98%B6/" title="Javascript高阶"><img class="cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-09-25</div><div class="title">Javascript高阶</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/avatar.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">CoderT</div><div class="author-info__description">一以贯之的努力，不得懈怠的人生</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">2</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">1</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/T-oney666/T-oney666.github.io"><i class="fab fa-github"></i><span>加入我</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">这是我的博客，记录日常工作和学习中的内容。如有不对，请多指教！</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E7%BC%96%E5%86%99%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.</span> <span class="toc-text">js 编写位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#noscript"><span class="toc-number">2.</span> <span class="toc-text">noscript</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%96%E5%86%99-js-%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">3.</span> <span class="toc-text">编写 js 的注意事项</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%A4%E4%BA%92%E6%96%B9%E5%BC%8F"><span class="toc-number">4.</span> <span class="toc-text">交互方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E8%AF%AD%E5%8F%A5%E5%92%8C%E5%88%86%E5%8F%B7"><span class="toc-number">5.</span> <span class="toc-text">js 语句和分号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E6%B3%A8%E9%87%8A"><span class="toc-number">6.</span> <span class="toc-text">js 注释</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F-variable-%E5%92%8C%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B-data-type"><span class="toc-number"></span> <span class="toc-text">变量(variable)和数据类型(data-type)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-number">1.</span> <span class="toc-text">变量的定义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83"><span class="toc-number">2.</span> <span class="toc-text">变量的命名规范</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A7%84%E5%88%99"><span class="toc-number">2.1.</span> <span class="toc-text">规则</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A7%84%E8%8C%83"><span class="toc-number">2.2.</span> <span class="toc-text">规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">2.3.</span> <span class="toc-text">变量的注意事项</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.</span> <span class="toc-text">数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#typeof-%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-number">3.1.</span> <span class="toc-text">typeof 操作符</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">4.</span> <span class="toc-text">js 数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Number-%E7%B1%BB%E5%9E%8B"><span class="toc-number">4.1.</span> <span class="toc-text">Number 类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#String-%E7%B1%BB%E5%9E%8B"><span class="toc-number">4.2.</span> <span class="toc-text">String 类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Boolean-%E7%B1%BB%E5%9E%8B"><span class="toc-number">4.3.</span> <span class="toc-text">Boolean 类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Undefined"><span class="toc-number">4.4.</span> <span class="toc-text">Undefined</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Object-%E7%B1%BB%E5%9E%8B"><span class="toc-number">4.5.</span> <span class="toc-text">Object 类型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Null-%E7%B1%BB%E5%9E%8B"><span class="toc-number">4.6.</span> <span class="toc-text">Null 类型</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%BD%AC%E6%8D%A2"><span class="toc-number">5.</span> <span class="toc-text">数据类型的转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2-String-%E7%9A%84%E8%BD%AC%E6%8D%A2"><span class="toc-number">6.</span> <span class="toc-text">字符串 String 的转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97-Number-%E7%9A%84%E8%BD%AC%E6%8D%A2"><span class="toc-number">7.</span> <span class="toc-text">数字 Number 的转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Boolean-%E7%9A%84%E8%BD%AC%E6%8D%A2"><span class="toc-number">8.</span> <span class="toc-text">Boolean 的转换</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number"></span> <span class="toc-text">运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6-operators-%E5%92%8C%E8%BF%90%E7%AE%97%E5%85%83"><span class="toc-number">1.</span> <span class="toc-text">运算符(operators)和运算元</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%97%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">2.</span> <span class="toc-text">算数运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">3.</span> <span class="toc-text">赋值运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E5%9C%B0%E4%BF%AE%E6%94%B9-Modify-in-place"><span class="toc-number">3.1.</span> <span class="toc-text">原地修改(Modify-in-place)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%A2%9E%E5%92%8C%E8%87%AA%E5%87%8F"><span class="toc-number">4.</span> <span class="toc-text">自增和自减</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%92%8C%E2%80%93%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="toc-number">4.1.</span> <span class="toc-text">++和–的位置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">4.2.</span> <span class="toc-text">运算符的优先级</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AF%94%E8%BE%83%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">5.</span> <span class="toc-text">比较运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%92%8C-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">5.1.</span> <span class="toc-text">&#x3D;&#x3D;和&#x3D;&#x3D;&#x3D;的区别</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#x3D-x3D-%E7%9A%84%E8%A1%A5%E5%85%85-%E4%BA%86%E8%A7%A3"><span class="toc-number">5.2.</span> <span class="toc-text">&#x3D;&#x3D; 的补充(了解)</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E6%94%AF%E8%AF%AD%E5%8F%A5"><span class="toc-number"></span> <span class="toc-text">分支语句</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%90%86%E8%A7%A3%E4%BB%A3%E7%A0%81%E5%9D%97"><span class="toc-number">0.1.</span> <span class="toc-text">理解代码块</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84"><span class="toc-number">0.2.</span> <span class="toc-text">什么是分支结构</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#if-%E5%88%86%E6%94%AF%E8%AF%AD%E5%8F%A5"><span class="toc-number"></span> <span class="toc-text">if 分支语句</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#if%E2%80%A6"><span class="toc-number">1.</span> <span class="toc-text">if…</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#if-%E8%AF%AD%E5%8F%A5%E7%9A%84%E7%BB%86%E8%8A%82%E8%A1%A5%E5%85%85"><span class="toc-number">1.1.</span> <span class="toc-text">if 语句的细节补充</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#if%E2%80%A6else%E2%80%A6%E8%AF%AD%E5%8F%A5"><span class="toc-number">2.</span> <span class="toc-text">if…else…语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#if%E2%80%A6else-if%E2%80%A6else%E2%80%A6%E8%AF%AD%E5%8F%A5"><span class="toc-number">3.</span> <span class="toc-text">if…else if…else…语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E5%85%83%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">4.</span> <span class="toc-text">三元运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">5.</span> <span class="toc-text">逻辑运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">5.1.</span> <span class="toc-text">认识逻辑运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E6%88%96%E7%9A%84%E6%9C%AC%E8%B4%A8"><span class="toc-number">5.2.</span> <span class="toc-text">逻辑或的本质</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E4%B8%8E%E7%9A%84%E6%9C%AC%E8%B4%A8"><span class="toc-number">5.3.</span> <span class="toc-text">逻辑与的本质</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%9D%9E%E8%BF%90%E7%AE%97"><span class="toc-number">5.4.</span> <span class="toc-text">非运算</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#switch-%E8%AF%AD%E5%8F%A5"><span class="toc-number"></span> <span class="toc-text">switch 语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5"><span class="toc-number"></span> <span class="toc-text">循环语句</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#while-%E5%BE%AA%E7%8E%AF"><span class="toc-number">1.</span> <span class="toc-text">while 循环</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#do%E2%80%A6while-%E5%BE%AA%E7%8E%AF"><span class="toc-number">2.</span> <span class="toc-text">do…while 循环</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for-%E5%BE%AA%E7%8E%AF-%E9%87%8D%E7%82%B9"><span class="toc-number">3.</span> <span class="toc-text">for 循环(重点)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BE%AA%E7%8E%AF%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5"><span class="toc-number">4.</span> <span class="toc-text">循环控制语句</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BE%AA%E7%8E%AF%E7%9A%84%E5%B5%8C%E5%A5%97"><span class="toc-number">4.1.</span> <span class="toc-text">循环的嵌套</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">5.</span> <span class="toc-text">总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0"><span class="toc-number"></span> <span class="toc-text">函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A8%8B%E5%BA%8F%E9%87%8C%E9%9D%A2%E7%9A%84-foo%E3%80%81bar%E3%80%81baz"><span class="toc-number">1.</span> <span class="toc-text">程序里面的 foo、bar、baz</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-number">2.</span> <span class="toc-text">函数的定义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E5%92%8C%E8%B0%83%E7%94%A8"><span class="toc-number">3.</span> <span class="toc-text">函数的声明和调用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-number">4.</span> <span class="toc-text">函数的参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC"><span class="toc-number">5.</span> <span class="toc-text">函数的返回值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#arguments-%E5%AE%9E%E5%8F%82%E5%88%97%E8%A1%A8"><span class="toc-number">6.</span> <span class="toc-text">arguments 实参列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%92%E5%BD%92"><span class="toc-number">7.</span> <span class="toc-text">递归</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%80%E9%83%A8%E5%92%8C%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F"><span class="toc-number">8.</span> <span class="toc-text">局部和全局变量</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">8.1.</span> <span class="toc-text">作用域</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B1%80%E9%83%A8%E5%92%8C%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F-1"><span class="toc-number">8.2.</span> <span class="toc-text">局部和全局变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E8%AE%BF%E9%97%AE%E9%A1%BA%E5%BA%8F"><span class="toc-number">8.3.</span> <span class="toc-text">变量的访问顺序</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E5%A4%B4%E7%AD%89%E5%85%AC%E6%B0%91"><span class="toc-number">9.</span> <span class="toc-text">函数的头等公民</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%EF%BC%88callback-function%EF%BC%89"><span class="toc-number">10.</span> <span class="toc-text">回调函数（callback function）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0"><span class="toc-number">11.</span> <span class="toc-text">立即执行函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%84%E8%A7%A3%E6%9E%90"><span class="toc-number">12.</span> <span class="toc-text">预解析</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A2%84%E8%A7%A3%E6%9E%90-var-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">12.1.</span> <span class="toc-text">预解析 var 关键字</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A7%A3%E6%9E%90-%E5%A3%B0%E6%98%8E%E5%BC%8F-%E5%87%BD%E6%95%B0"><span class="toc-number">12.2.</span> <span class="toc-text">解析 声明式 函数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A2%84%E8%A7%A3%E6%9E%90%E7%9A%84%E6%97%A0%E8%8A%82%E6%93%8D"><span class="toc-number">12.3.</span> <span class="toc-text">预解析的无节操</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1"><span class="toc-number"></span> <span class="toc-text">对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.</span> <span class="toc-text">认识对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E5%92%8C%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1"><span class="toc-number">2.</span> <span class="toc-text">创建和使用对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B8%B8%E8%A7%81%E6%93%8D%E4%BD%9C"><span class="toc-number">3.</span> <span class="toc-text">对象的常见操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%B3%E8%81%94%E8%AF%AD%E6%B3%95"><span class="toc-number">4.</span> <span class="toc-text">数组关联语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%81%8D%E5%8E%86-for%E2%80%A6in"><span class="toc-number">5.</span> <span class="toc-text">对象的遍历(for…in)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E7%9A%84%E5%86%85%E5%AD%98%E5%88%86%E9%85%8D-important"><span class="toc-number">6.</span> <span class="toc-text">js 的内存分配(!important)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%80%9D%E8%80%83%E5%A6%82%E4%B8%8B%E7%8E%B0%E8%B1%A1"><span class="toc-number">6.1.</span> <span class="toc-text">思考如下现象</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#this"><span class="toc-number">7.</span> <span class="toc-text">this</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#this-%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-number">7.1.</span> <span class="toc-text">this 的作用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%80%9D%E7%BB%B4%E6%96%B9%E5%BC%8F-%EF%BC%88%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E4%B8%80%E7%B3%BB%E5%88%97%E7%9A%84%E5%AF%B9%E8%B1%A1%EF%BC%89"><span class="toc-number">8.</span> <span class="toc-text">类和对象的思维方式 （如何创建一系列的对象）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%85%B3%E7%B3%BB"><span class="toc-number">9.</span> <span class="toc-text">类和对象的关系</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%9D%E5%A4%96%E8%A1%A5%E5%85%85-%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1-window"><span class="toc-number">10.</span> <span class="toc-text">额外补充-全局对象 window</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%9D%E5%A4%96%E8%A1%A5%E5%85%85-%E5%87%BD%E6%95%B0%E4%B9%9F%E6%98%AF%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.</span> <span class="toc-text">额外补充-函数也是对象</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84-Array"><span class="toc-number"></span> <span class="toc-text">数组 Array</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%AE%A4%E8%AF%86%E6%95%B0%E7%BB%84"><span class="toc-number">1.</span> <span class="toc-text">1.认识数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84"><span class="toc-number">2.</span> <span class="toc-text">2.创建数组</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1-%E5%AD%97%E9%9D%A2%E9%87%8F%E5%88%9B%E5%BB%BA"><span class="toc-number">2.1.</span> <span class="toc-text">2.1 字面量创建</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0-Array-%E5%88%9B%E5%BB%BA"><span class="toc-number">2.2.</span> <span class="toc-text">2.2 构造函数(Array)创建</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3-%E7%B4%A2%E5%BC%95%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">2.3.</span> <span class="toc-text">2.3 索引的问题</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%95%B0%E7%BB%84%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C"><span class="toc-number">3.</span> <span class="toc-text">3 数组的基本操作</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-%E8%AE%BF%E9%97%AE%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="toc-number">3.1.</span> <span class="toc-text">3.1 访问数组中的元素</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-%E4%BF%AE%E6%94%B9%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="toc-number">3.2.</span> <span class="toc-text">3.2 修改数组中的元素</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-%E5%A2%9E%E5%8A%A0%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0-x2F-%E5%88%A0%E9%99%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0-%E4%BA%86%E8%A7%A3"><span class="toc-number">3.3.</span> <span class="toc-text">3.3 增加数组中的元素&#x2F;删除数组中的元素(了解)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%95%B0%E7%BB%84%E7%9A%84%E6%B7%BB%E5%8A%A0%E3%80%81%E5%88%A0%E9%99%A4%E6%96%B9%E6%B3%95-%E4%B8%80"><span class="toc-number">4.</span> <span class="toc-text">4.数组的添加、删除方法(一)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#push-pop-shift-unshift"><span class="toc-number">4.1.</span> <span class="toc-text">push-pop shift-unshift</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%95%B0%E7%BB%84%E7%9A%84%E6%B7%BB%E5%8A%A0%E3%80%81%E5%88%A0%E9%99%A4%E6%96%B9%E6%B3%95-%E4%BA%8C"><span class="toc-number">5.</span> <span class="toc-text">5.数组的添加、删除方法(二)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-length-%E5%B1%9E%E6%80%A7"><span class="toc-number">6.</span> <span class="toc-text">6.length 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E6%95%B0%E7%BB%84%E7%9A%84%E9%81%8D%E5%8E%86"><span class="toc-number">7.</span> <span class="toc-text">7 数组的遍历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95"><span class="toc-number">8.</span> <span class="toc-text">8 数组方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#8-1-slice"><span class="toc-number">8.1.</span> <span class="toc-text">8.1 slice</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-2-concat"><span class="toc-number">8.2.</span> <span class="toc-text">8.2 concat</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-3-join"><span class="toc-number">8.3.</span> <span class="toc-text">8.3 join</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95-%E6%9F%A5%E6%89%BE%E5%85%83%E7%B4%A0"><span class="toc-number">9.</span> <span class="toc-text">9 数组方法-查找元素</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#9-1-indexOf"><span class="toc-number">9.1.</span> <span class="toc-text">9.1 indexOf</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-2-includes"><span class="toc-number">9.2.</span> <span class="toc-text">9.2 includes</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-3-find-%E5%92%8C-findIndex"><span class="toc-number">9.3.</span> <span class="toc-text">9.3 find 和 findIndex</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-%E6%95%B0%E7%BB%84%E7%9A%84%E6%8E%92%E5%BA%8F-sort-x2F-reverse"><span class="toc-number">10.</span> <span class="toc-text">10 数组的排序- sort&#x2F;reverse</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#10-1-sort"><span class="toc-number">10.1.</span> <span class="toc-text">10.1 sort</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-2-reverse"><span class="toc-number">10.2.</span> <span class="toc-text">10.2 reverse</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%B6%E4%BB%96%E9%AB%98%E9%98%B6%E6%96%B9%E6%B3%95"><span class="toc-number">11.</span> <span class="toc-text">11 数组的其他高阶方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#11-1-forEach"><span class="toc-number">11.1.</span> <span class="toc-text">11.1 forEach</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-2-every"><span class="toc-number">11.2.</span> <span class="toc-text">11.2 every</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-3-some"><span class="toc-number">11.3.</span> <span class="toc-text">11.3 some</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-4-filter"><span class="toc-number">11.4.</span> <span class="toc-text">11.4 filter</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-5-map"><span class="toc-number">11.5.</span> <span class="toc-text">11.5 map</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-6-reduce"><span class="toc-number">11.6.</span> <span class="toc-text">11.6 reduce</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-%E6%95%B0%E7%BB%84%E5%A1%8C%E9%99%B7"><span class="toc-number">12.</span> <span class="toc-text">12 数组塌陷</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#12-1-%E6%A6%82%E5%BF%B5"><span class="toc-number">12.1.</span> <span class="toc-text">12.1 概念</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-2-%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95"><span class="toc-number">12.2.</span> <span class="toc-text">12.2 解决办法</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-number">13.</span> <span class="toc-text">13 数组去重（重点）</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#13-1-%E6%8E%92%E5%BA%8F%E5%90%8E%E5%88%A0%E9%99%A4%E7%9B%B8%E9%82%BB"><span class="toc-number">13.1.</span> <span class="toc-text">13.1 排序后删除相邻</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-2-push-%E6%97%B6%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E9%87%8D%E5%A4%8D"><span class="toc-number">13.2.</span> <span class="toc-text">13.2 push 时判断是否重复</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-3-%E5%88%A9%E7%94%A8%E5%AF%B9%E8%B1%A1%E9%94%AE%E5%90%8D%E4%B8%8D%E9%87%8D%E5%A4%8D"><span class="toc-number">13.3.</span> <span class="toc-text">13.3 利用对象键名不重复</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-4-set"><span class="toc-number">13.4.</span> <span class="toc-text">13.4 set</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-5-%E6%8C%A8%E4%B8%AA%E6%AF%94%E8%BE%83"><span class="toc-number">13.5.</span> <span class="toc-text">13.5 挨个比较</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93-1"><span class="toc-number">14.</span> <span class="toc-text">总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E5%86%85%E7%BD%AE%E7%B1%BB"><span class="toc-number"></span> <span class="toc-text">常见内置类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%85%E8%A3%85%E7%B1%BB%E5%9E%8B"><span class="toc-number">1.</span> <span class="toc-text">包装类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B-Number-%E7%B1%BB%E5%B1%9E%E6%80%A7"><span class="toc-number">2.</span> <span class="toc-text">数字类型 Number 类属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#toString-%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95"><span class="toc-number">2.1.</span> <span class="toc-text">toString 实例方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#toFixed-%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95"><span class="toc-number">2.2.</span> <span class="toc-text">toFixed 实例方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#parseInt-parseFloat-%E7%B1%BB%E6%96%B9%E6%B3%95"><span class="toc-number">2.3.</span> <span class="toc-text">parseInt parseFloat 类方法</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%A6%E5%AF%B9%E8%B1%A1-Math"><span class="toc-number">3.</span> <span class="toc-text">数学对象 Math</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-%E7%9A%84%E8%A1%A5%E5%85%85"><span class="toc-number">4.</span> <span class="toc-text">String 的补充</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#String-%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="toc-number">4.1.</span> <span class="toc-text">String 常见的属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E8%AE%BF%E9%97%AE"><span class="toc-number">4.2.</span> <span class="toc-text">字符串的访问</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E9%81%8D%E5%8E%86"><span class="toc-number">4.3.</span> <span class="toc-text">字符串的遍历</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.4.</span> <span class="toc-text">修改字符串</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9F%A5%E6%89%BE%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.5.</span> <span class="toc-text">查找字符串</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%80%E5%A4%B4%E5%92%8C%E7%BB%93%E5%B0%BE"><span class="toc-number">4.6.</span> <span class="toc-text">开头和结尾</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9B%BF%E6%8D%A2%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.7.</span> <span class="toc-text">替换字符串</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%88%AA%E5%8F%96%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.8.</span> <span class="toc-text">截取字符串</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E6%96%B9%E6%B3%95"><span class="toc-number">4.9.</span> <span class="toc-text">其他方法</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array"><span class="toc-number"></span> <span class="toc-text">Array</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Date-%E6%97%A5%E6%9C%9F"><span class="toc-number"></span> <span class="toc-text">Date 日期</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#new-Date"><span class="toc-number">1.</span> <span class="toc-text">new Date()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E5%8C%96"><span class="toc-number">2.</span> <span class="toc-text">日期格式化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E6%97%B6%E9%97%B4%E5%B7%AE"><span class="toc-number">3.</span> <span class="toc-text">获取时间差</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">4.</span> <span class="toc-text">定时器</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#setTimeout-fn-%E6%97%B6%E9%97%B4"><span class="toc-number">4.1.</span> <span class="toc-text">setTimeout(fn,时间)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#setInterval-fn-%E6%97%B6%E9%97%B4"><span class="toc-number">4.2.</span> <span class="toc-text">setInterval(fn,时间)</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/09/25/JavaScript%E9%AB%98%E9%98%B6/" title="Javascript高阶"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Javascript高阶"/></a><div class="content"><a class="title" href="/2022/09/25/JavaScript%E9%AB%98%E9%98%B6/" title="Javascript高阶">Javascript高阶</a><time datetime="2022-09-25T11:40:37.000Z" title="发表于 2022-09-25 19:40:37">2022-09-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/09/19/JavaScript%E5%9F%BA%E7%A1%80/" title="Javascript基础"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Javascript基础"/></a><div class="content"><a class="title" href="/2022/09/19/JavaScript%E5%9F%BA%E7%A1%80/" title="Javascript基础">Javascript基础</a><time datetime="2022-09-19T06:40:37.000Z" title="发表于 2022-09-19 14:40:37">2022-09-19</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2022 - 2023 By CoderT</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">Hi, welcome to my <a target="_blank" rel="noopener" href="https://tonytop.top/">blog</a>!</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"></div><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>